vue-router2.x使用入門

組件中的路由

---

<router-link to=""></router-link>

無參數

<router-link to="/ar/1">測試一</router-link>
<router-link to="/ar/2">測試二</router-link>

與router1.x不一樣點

在vue-router2.x中使用<router-link的方式,v1.x中使用<a v-link="'/about'">About</a>

帶參數

<router-link to="/ar/1?id=1&age=22">測試一</router-link>
 <router-link to="/ar/2?id=2&age=24">測試二</router-link>

在vue-devtools中可查看到全部的某個路由的全部信息:

路由的重定向

路由的重定向須要咱們在路由文件中配置:

new Router({
    ...
    {
      path: '/ar',
      name: 'ar',
      component: Ar
    },{
      path: '/ar/1',
      redirect: '/ar/2', // 配置redirect跳轉到測試二
      name: 'ar1',
      component: Ar1
    },{
      path: '/ar/2',
      name: 'ar2',
      component: Ar2
    }
  ]
})

注意：從圖中看出，雖然路由發生了跳轉，可是後面跟的參數並無發生變化。

組件內的導航鉤子

• beforeRouteEnter(to, from, next) 進入路由時候觸發

• beforeRouteLeave(to, from, next) 離開路由時候觸發

參數含義：

• to: Route: 即將要進入的目標 路由對象
• from: Route: 當前導航正要離開的路由
• next: Function: 必定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。
• next(): 進行管道中的下一個鉤子。若是所有鉤子執行完了，則導航的狀態就是 confirmed （確認的）。
• next(false): 中斷當前的導航。若是瀏覽器的 URL 改變了（多是用戶手動或者瀏覽器後退按鈕），那麼 URL 地址會重置到 from 路由對應的地址。
• next('/') 或者 next({ path: '/' }): 跳轉到一個不一樣的地址。當前的導航被中斷，而後進行一個新的導航。

注意的點：在我寫demo的時候發現，若是你在一個組件這麼定義

...
beforeRouteEnter (to, from, next) {

       
},
...

進入路由鉤子中什麼也不執行next()的話，會一直沒法跳轉到對應的路由

因此，建議一旦用了組件鉤子，就必定不要忘記next!

路由鉤子不一樣於router1.x

• activate被替換爲beforeRouteEnter
• deactivate被移除,使用beforeDestroy 或者 destroyed鉤子做爲替代。
• canActivate被替換爲beforeEnter
• canDeactivate被替換爲beforeRouteLeave

嵌套路由

須要嵌套的目錄結構:

• /ar (單獨組件)
• /ar/1 (單獨組件)
• /ar/2 (單獨組件)

如今路由文件中配置：

new Router({
  routes: [
    ...
    {
      path: '/ar',
      name: 'ar',
      component: Ar,
      children:[ // 在ar中添加children子路由
        {
          path: '1',
          name: 'ar1',
          component: Ar1
        },
         {
          path: '2',
          name: 'ar2',
          component: Ar2
        }
      ]
    }
    // ,{
    //   path: '/ar/1',
    //   name: 'ar1',
    //   component: Ar1
    // },{
    //   path: '/ar/2',
    //   name: 'ar2',
    //   component: Ar2
    // }
  ]
})

ar.vue文件:

<template>

    <div>
        Ar下有兩個嵌套的子路由
        <router-link to="/ar/1?id=1&age=22">子路由一</router-link>
        <router-link to="/ar/2?id=2&age=24">子路由二</router-link>
        <router-view></router-view>
    </div>
</template>

可見這個單文件中有兩個router-view。