vue-router之學習筆記

用 Vue.js + vue-router 建立單頁應用，是很是簡單的。使用 Vue.js ，咱們已經能夠經過組合組件來組成應用程序，當你要把 vue-router 添加進來，咱們須要作的是，將組件(components)映射到路由(routes)，而後告訴 vue-router 在哪裏渲染它們。

1、Vue引用插件

在vue開發過程當中會用到不少插件，例如vue-router、vuex、vue-resource、mint UI、element-ui等，全部插件的引用方式都以下所示：

（這裏是利用了vue-cli以及npm+webpack來搭建環境。若是不是，直接引用vue-router.js便可）

---

 

2、路由（vue-router）的基本使用

咱們須要作的是，將組件(components)映射到路由(routes)，而後告訴 vue-router 在哪裏渲染它們：

demo

一、在頁面上定義導航欄以及對應須要變化的模塊

 1 <div id="app">
 2   <h1>Hello App!</h1>
 3   <p>
 4     <!-- 使用 router-link 組件來導航. -->
 5     <!-- 經過傳入 `to` 屬性指定連接. -->
 6     <!-- <router-link> 默認會被渲染成一個 `<a>` 標籤 -->
 7     <router-link to="/foo">Go to Foo</router-link>  8 <router-link to="/bar">Go to Bar</router-link>
 9   </p>
10   <!-- 路由出口 -->
11   <!-- 路由匹配到的組件將渲染在這裏 -->
12   <router-view></router-view>
13 </div>

 

二、在js中定義路由組件以及映射

 1 // 0. 若是使用模塊化機制編程，導入Vue和VueRouter，要調用 Vue.use(VueRouter)
 2 
 3 // 1. 定義（路由）組件。
 4 // 能夠從其餘文件 import 進來
 5 const Foo = { template: '<div>foo</div>' }  6 const Bar = { template: '<div>bar</div>' }  7 
 8 // 2. 定義路由
 9 // 每一個路由應該映射一個組件。 其中"component" 能夠是
10 // 經過 Vue.extend() 建立的組件構造器，
11 // 或者，只是一個組件配置對象。
12 // 咱們晚點再討論嵌套路由。
13 const routes = [ 14   { path: '/foo', component: Foo }, 15   { path: '/bar', component: Bar } 16 ] 17 
18 // 3. 建立 router 實例，而後傳 `routes` 配置
19 // 你還能夠傳別的配置參數, 不過先這麼簡單着吧。
20 const router = new VueRouter({ 21   routes // （縮寫）至關於 routes: routes
22 }) 23 
24 // 4. 建立和掛載根實例。
25 // 記得要經過 router 配置參數注入路由，
26 // 從而讓整個應用都有路由功能
27 const app = new Vue({ 28  router 29 }).$mount('#app') 30 
31 // 如今，應用已經啓動了！

在使用vue-cli+npm+webpack時第4步建立和掛載根實例還能夠這樣寫：

1 var app = new Vue({
2   el: '#app',
3   router,
4   template: '<App/>',
5   components: { App }
6 })

要注意，當 <router-link> 對應的路由匹配成功，將自動設置 class 屬性值 .router-link-active

 

---

 

3、動態路由-傳參

咱們常常須要把某種模式匹配到的全部路由，全都映射到同個組件。那麼，咱們能夠在 vue-router 的路由路徑中使用『動態路徑參數』

 demo

一個『路徑參數』使用冒號 : 標記。當匹配到一個路由時，參數值會被設置到 this.$route.params，能夠在每一個組件內使用。

1 <div id="app">
2   <p>
3     <router-link to="/user/foo">/user/foo</router-link>
4     <router-link to="/user/bar">/user/bar</router-link>
5   </p>
6   <router-view></router-view>
7 </div>

1 const User = {
2   template: '<div>User {{ $route.params.id }}</div>'
3 }
4 const router = new VueRouter({
5   routes: [
6     // 動態路徑參數 以冒號開頭
7     { path: '/user/:id', component: User }
8   ]
9 })

 上述導航傳參還有另外兩種方式：

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

router.push({ name: 'user', params: { userId: 123 }})

這兩種方式都會把路由導航到 /user/123 路徑。

 

---

 

4、嵌套路由

 在動態路由的demo中，這裏的 <router-view> 是最頂層的出口，渲染最高級路由匹配到的組件。一樣地，一個被渲染組件一樣能夠包含本身的嵌套 <router-view>。例如，在 User 組件的模板添加一個 <router-view>

demo

1 const User = {
2   template: `
3     <div class="user">
4       <h2>User {{ $route.params.id }}</h2>
5       <router-view></router-view>
6     </div>
7   `
8 }

要在嵌套的出口中渲染組件，須要在 VueRouter 的參數中使用 children 配置：

 1 const router = new VueRouter({
 2   routes: [
 3     { path: '/user/:id', component: User,
 4  children: [
 5         {
 6           // 當 /user/:id/profile 匹配成功，
 7           // UserProfile 會被渲染在 User 的 <router-view> 中
 8           path: 'profile',
 9           component: UserProfile
10         },
11         {
12           // 當 /user/:id/posts 匹配成功
13           // UserPosts 會被渲染在 User 的 <router-view> 中
14           path: 'posts',
15           component: UserPosts
16         }
17       ]
18     }
19   ]
20 })

要注意，以 / 開頭的嵌套路徑會被看成根路徑。 這讓你充分的使用嵌套組件而無須設置嵌套的路徑。

此時，基於上面的配置，當你訪問 /user/foo 時，User 的出口是不會渲染任何東西，這是由於沒有匹配到合適的子路由。若是你想要渲染點什麼，能夠提供一個 空的 子路由（例如demo中的UserHome）