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。