1. 路由配置

默認(rèn)路由跳轉(zhuǎn)

{
     path: '/',
     redirect: '/app'
}

在 new Router時(shí)可用的配置參數(shù)：

mode : history
base : 基路徑
linkActiveClass : 'active-link' // 被激活樣式（模糊匹配）
linkExactActiveClass : 'exact-active-link' //被激活樣式（精準(zhǔn)匹配）
/**
linkActiveClass和linkExactActiveClass的區(qū)別
使用linkActiveClass，路由跳轉(zhuǎn)為/main和/main/a時(shí)否會(huì)激活樣式；
使用linkExactActiveClass，路由跳轉(zhuǎn)為/main時(shí)會(huì)激活樣式，跳轉(zhuǎn)為/main/a時(shí)則不會(huì)激活樣式。
**/
scrollBehavior(to, from, savedPosition) {//默認(rèn)滾動(dòng)位置
    if(savedPosition) {
         return savedPosition
    } else {
         return {x:0,y:0}
    }
}
fallback: false //單頁(yè)變多頁(yè)

2.路由傳參

Vue路由傳參的幾種方式

$router.push 實(shí)現(xiàn)path攜帶參數(shù)的跳轉(zhuǎn)：

this.$router.push({
     path: `/describe/${id}`,
})

//路由配置：
{
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
}

//子組件中獲取參數(shù)
$route.params.id

通過(guò)params傳參：

this.$router.push({
      name: 'Describe',
      params: {
         id: id
      }
})

//路由配置
{
     path: '/describe',
     name: 'Describe',
     component: Describe
 }

//子組件中獲取參數(shù)
$route.params.id

通過(guò)使用path來(lái)匹配路由，然后通過(guò)query來(lái)傳遞參數(shù)。這種情況下 query傳遞的參數(shù)會(huì)顯示在url后面?id=？

this.$router.push({
      path: '/describe',
      query: {
         id: id
      }
})

//路由配置
{
     path: '/describe',
     name: 'Describe',
     component: Describe
 }

//子組件中獲取參數(shù)
$route.query.id

3. 路由守衛(wèi)（導(dǎo)航守衛(wèi)）

即路由跳轉(zhuǎn)前做一些驗(yàn)證。

全局守衛(wèi)

每次路由跳轉(zhuǎn)都能夠觸發(fā)三個(gè)function：

router.beforeEach((to, from, next) => {
    //全局前置守衛(wèi)
    //路由跳轉(zhuǎn)前攔截
})
router.beforeResolve((to, from, next) => {
    //全局解析守衛(wèi)
    //跟beforeEach相似，區(qū)別在于導(dǎo)航被確認(rèn)之前，同時(shí)在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后，解析守衛(wèi)就被調(diào)用
})
router.afterEach((to, from) => {
   //全局后置鉤子

})

組件內(nèi)守衛(wèi)

組件內(nèi)有三個(gè)鉤子函數(shù)可進(jìn)行路由守衛(wèi)：

  beforeRouteEnter (to, from, next) {
    // 在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用
    // 不！能！獲取組件實(shí)例 `this`
    // 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前，組件實(shí)例還沒(méi)被創(chuàng)建
  },
  beforeRouteUpdate (to, from, next) {
    // 在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用
    // 舉例來(lái)說(shuō)，對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候，
    // 由于會(huì)渲染同樣的 Foo 組件，因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。
    // 可以訪問(wèn)組件實(shí)例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 導(dǎo)航離開(kāi)該組件的對(duì)應(yīng)路由時(shí)調(diào)用
    // 可以訪問(wèn)組件實(shí)例 `this`
  }

4. 異步路由

例：

//路由配置
{
     path: '/describe',
     name: 'Describe',
     component: () => import('...組件路徑')
 }

組件在路由跳轉(zhuǎn)時(shí)才渲染
需要安裝babel-plugin-syntax-dynamic-import插件
好處：可以使首屏加載速度更快。