Vue-Router的使用方法

wait.發表於2018-11-08
Vue

使用 Vue.js 做專案的時候，一個頁面是由多個元件構成的，所以在跳轉頁面的時候，並不適合用傳統的 href，於是 vue-router 應運而生。

路由，其實就是指向的意思，當我點選頁面上的home按鈕時，頁面中就要顯示home的內容，如果點選頁面上的about 按鈕，頁面中就要顯示about 的內容。Home按鈕  => home 內容， about按鈕 => about 內容，也可以說是一種對映. 所以在頁面上有兩個部分，一個是點選部分，一個是點選之後，顯示內容的部分。

點選之後，怎麼做到正確的對應，比如，我點選home 按鈕，頁面中怎麼就正好能顯示home的內容。這就要在js 檔案中配置路由。

官方文件： router.vuejs.org/zh-cn/essen…

Vue-Router的最簡單使用

1.先註冊路由

2.將路由註冊到VM元件中

3.定義元件

4.頁面定義跳轉路徑

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="lib/vue.min.js"></script>
    <script src="lib/vue-router-3.0.1.js"></script>
    <style type="text/css">
    </style>//前端全棧學習交流圈：866109386
  </head>//面向1-3年經驗前端開發人員
  <body>//幫助如破技術瓶頸，提升思維能力
     
    <div id="app">
      <!--
        由於Vue-router的hash匹配原則所以我們需要在原定義的路徑上加一個#號
      -->
      <a href="#/login" rel="external nofollow" rel="external nofollow" >登入</a>
      <a href="#/register" rel="external nofollow" rel="external nofollow" >註冊</a>
      <router-view></router-view>
    </div>
  </body>
  <script>
    var login={
      template:'<h1>登入元件</h1>'
    }
    var register={
      template:'<h1>註冊元件</h1>'
    }
    var routerObj = new VueRouter({
      routes:[
      //此處的component只能使用元件物件，而不能使用註冊的模板的名稱
        {path:"/login",component:login},
        {path:"/register",component:register}
      ]
    })
    var vm = new Vue({
      el:'#app',
      data:{
      },
      methods:{
         
      },
      router:routerObj//將路由規則物件註冊到VM例項上
    })
  </script>
</html>
複製程式碼

使用Router-Link替代a標籤 這麼做主要是為了去掉a標籤中的為了匹配hash地址的“#”,如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="lib/vue.min.js"></script>
    <script src="lib/vue-router-3.0.1.js"></script>
    <style type="text/css">
    </style>
  </head>
  <body>
     
    <div id="app">
      <!--
        由於Vue-router的hash匹配原則所以我們需要在原定義的路徑上加一個#號
      -->
<!--      <a href="#/login" rel="external nofollow" rel="external nofollow" >登入</a>
      <a href="#/register" rel="external nofollow" rel="external nofollow" >註冊</a>-->
      <router-link to="/login" tag="span">登入</router-link>
      <router-link to="/register">註冊</router-link>
      <router-view></router-view>
    </div>//前端全棧學習交流圈：866109386
  </body>//面向1-3年經驗前端開發人員
  <script>//幫助突破技術瓶頸，提升思維能力
    var login={
      template:'<h1>登入元件</h1>'
    }
    var register={
      template:'<h1>註冊元件</h1>'
    }
    var routerObj = new VueRouter({
      routes:[
      //此處的component只能使用元件物件，而不能使用註冊的模板的名稱
        {path:"/login",component:login},
        {path:"/register",component:register}
      ]
    })
    var vm = new Vue({
      el:'#app',
      data:{
      },
      methods:{
         
      },
      router:routerObj//將路由規則物件註冊到VM例項上
    })
  </script>
</html>
複製程式碼

同時，我們還可以利用tag標籤來渲染router-link元素，router-link預設渲染為a連結元素，使用tag標籤可以渲染其他元素，上述程式碼中渲染為span元素了。無論渲染成什麼元素，都依然與a連線一樣擁有跳轉的點選事件

重定向技術以及預設路徑 預設路徑

我們可以使用預設路徑的方式指定根路徑,只需要在上述路由定義的方式中加入預設路徑即可

var routerObj = new VueRouter({
  routes:[
  //此處的component只能使用元件物件，而不能使用註冊的模板的名稱
    {path:"/",component:login},
    {path:"/login",component:login},
    {path:"/register",component:register}
  ]
})
複製程式碼

重定向方式指定預設路徑 同樣的使用一行程式碼即可直接重定向到login路徑下，相比上述的預設路徑，此方式在url的展示上更為明顯

var routerObj = new VueRouter({
  routes:[
  //此處的component只能使用元件物件，而不能使用註冊的模板的名稱
    {path:"/",redirect:"/login"},
    {path:"/login",component:login},
    {path:"/register",component:register}
  ]
})
複製程式碼

路由選中之後高亮設定 使用預設類設定為高亮 Vue為router-link內建了一個連線點選之後高亮的類router-link-active,即可以在自己的style中設定

<style type="text/css">
  .router-link-active{
    color: red;
    font-weight: 800;
    font-style: italic;
    font-size: 30px;
  }
</style>
複製程式碼

使用自定義類名 當我們想使用第三方定義的選中樣式，或者是自己想定義更為簡潔的樣式，可以使用linkActiveClass來定義，即在路由初始化時指定類名，在指定樣式時再自定義樣式

var routerObj = new VueRouter({
  routes:[
  //此處的component只能使用元件物件，而不能使用註冊的模板的名稱
    {path:"/",redirect:"/login"},
    {path:"/login",component:login},
    {path:"/register",component:register}
  ],
  linkActiveClass:'myactive'
})
複製程式碼

指定樣式

<style type="text/css">
  .router-link-active,.myactive{
    color: red;
    font-weight: 800;
    font-style: italic;
    font-size: 30px;
  }
</style>
複製程式碼

路由傳參 使用query方式傳遞引數 首先我們再設定路由連結是指定引數

<router-link to="/login?id=10&name=zhao">登入</router-link>
且可以指定並獲取多個引數，主要是再定義的元件物件內部使用created方法來獲得
複製程式碼
var login={
  template:'<h1>登入元件---{{$route.query.id}}--{{$route.query.name}}</h1>',
  created(){
    console.log(this.$route.query.id)
  }
}
複製程式碼

使用params方式傳遞引數 首先我們在路由定義的時候採用:定義params引數

var routerObj = new VueRouter({
  routes:[
  //此處的component只能使用元件物件，而不能使用註冊的模板的名稱
    {path:"/login/:id/:name",component:login},
    {path:"/register",component:register}
  ],
})
複製程式碼

在實際使用過程中如何傳遞

<router-link to="/login/10/zhao">登入</router-link>
   <router-link to="/register">註冊</router-link>
   <router-view></router-view>
複製程式碼

在元件中使用

var login={
  template:'<h1>登入元件---{{$route.params.id}}</h1>',
  created(){
    console.log(this.$route.params.id)
  }
}
複製程式碼

路由巢狀的實現

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="lib/vue-2.4.0.js"></script>
    <script src="lib/vue-router-3.0.1.js"></script>
    <style type="text/css">
 
    </style>//前端學習交流圈：866109386
  </head>//面向1-3年經驗前端人員
  <body>//幫助突破技術瓶頸，提升思維能力
 <div id="app">
 
  <router-link to="/account">Account</router-link>
 
  <router-view></router-view>
 
 </div>
 
 <template id="tmpl">
  <div>
   <h1>這是 Account 元件</h1>
 
   <router-link to="/account/login">登入</router-link>
   <router-link to="/account/register">註冊</router-link>
 
   <router-view></router-view>
  </div>
 </template>
 
 <script>
 
  // 元件的模板物件
  var account = {
   template: '#tmpl'
  }
 
  var login = {
   template: '<h3>登入</h3>'
  }
 
  var register = {
   template: '<h3>註冊</h3>'
  }
 
  var router = new VueRouter({
   routes: [
    {
     path: '/account',
     component: account,
     // 使用 children 屬性，實現子路由，同時，子路由的 path 前面，不要帶 / ，否則永遠以根路徑開始請求，這樣不方便我們使用者去理解URL地址
     children: [
      { path: 'login', component: login },
      { path: 'register', component: register }
     ]
    }
}
   ]
  })
 
  // 建立 Vue 例項，得到 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {},
   methods: {},
   router
  });
 </script>
</body>
</html>
複製程式碼

主要是由children屬性來實現的，上述程式碼中由三個易錯點

1.定義路由時，子路由沒有‘/' 2.在父元件中定義子元件要寫子元件的全路徑

3.在父元件中定義元件同樣要加入router-view元素

案例：路由命名檢視實現經典佈局 命名檢視在定義路由時使用components屬性(注意不是component)來定義：

var routerObj = new VueRouter({
  routes:[
  //此處的component只能使用元件物件，而不能使用註冊的模板的名稱
    {path:"/",components:{
      default:header,
      left:leftBox,
      main:mainBox
    }},
  ]
})
複製程式碼

幾個元件分別定義如下

var header={
  template:'<h1 class="header">頭部區域</h1>'
}
var leftBox={
  template:'<h1 class=left>左部選單區域</h1>'
}
var mainBox={
  template:'<h1 class="main">主體內容區域</h1>'
}
複製程式碼

我們在頁面上使用上述命名檢視時使用router-view的name屬性來定義

<div id="app">
  <router-view></router-view>
  <div id="container">
    <router-view name="left"></router-view>
    <router-view name="main"></router-view>
  </div>
 
</div>
複製程式碼

未使用命名屬t性name設定檢視元件的將採用default命名檢視

設定一下樣式

style type="text/css">
  html,body{
    margin: 0;
    padding: 0;
  }
  h1{
    margin: 0;
    padding: 0;
    font-size: 16px;
  }
  .header{
    background-color: #6495ED;
    height: 200px;
  }
   
  #container{
    display: flex;
    height: 600px;
  }
  .left{
    flex: 2;
    background-color: #0000FF;
  }
  .main{
    flex: 8;
    background-color: #8A2BE2;
  }
</style>
複製程式碼

相關文章