vue的路由守衛(wèi)和keep-alive后生命周期詳解

更新時(shí)間：2022年03月08日 16:38:51 作者：Darlingmi

這篇文章主要為大家詳細(xì)介紹了vue路由守衛(wèi)和keep-alive，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助

Vue-Router懶加載

1、箭頭函數(shù)+import

const List = () => import('@/components/list.vue')
const router = new VueRouter({
  routes: [
    { path: '/list', component: List }
  ]
})

2、箭頭函數(shù)+require

const router = new Router({
  routes: [
   {
     path: '/list',
     component: resolve => require(['@/components/list'], resolve)
   }
  ]
})

如何定義動(dòng)態(tài)路由

param方式

配置路由格式：/router/:id
傳遞的方式：在path后面跟上對(duì)應(yīng)的值
傳遞后形成的路徑：/router/123

路由定義

//在APP.vue中
<router-link :to="'/user/'+userId" replace>用戶</router-link>    
//在index.js
{
   path: '/user/:userid',
   component: User,
},

路由跳轉(zhuǎn)

// 方法1：<router-link :to="{ name: 'users', params: { myname: jake }}">按鈕</router-link>// 方法2：this.$router.push({name:'users',params:{myname:jake}})// 方法3：this.$router.push// 方法1：
<router-link :to="{ name: 'users', params: { myname: jake }}">按鈕</router-link>
// 方法2：
this.$router.push({name:'users',params:{myname:jake}})
// 方法3：
this.$router.push('/user/' + jake)

參數(shù)獲取 :通過 $route.params.userid 獲取傳遞的值。

query方式

配置路由格式：/router，也就是普通配置。
傳遞的方式：對(duì)象中使用query的key作為傳遞方式。
傳遞后形成的路徑：/route?id=123。

路由定義

//方式1：直接在router-link 標(biāo)簽上以對(duì)象的形式
<router-link :to="{path:'/profile',query:{name:'why',age:28,height:188}}">檔案</router-link>
// 方式2：寫成按鈕以點(diǎn)擊事件形式
<button @click='profileClick'>我的</button>    
profileClick(){
  this.$router.push({
    path: "/profile",
    query: {
        name: "kobi",
        age: "28",
        height: 198
    }
  });
}

跳轉(zhuǎn)方法

// 方法1：
<router-link :to="{ name: 'users', query: { uname: james }}">按鈕</router-link>
// 方法2：
this.$router.push({ name: 'users', query:{ uname:james }})
// 方法3：
<router-link :to="{ path: '/user', query: { uname:james }}">按鈕</router-link>
// 方法4：
this.$router.push({ path: '/user', query:{ uname:james }})
// 方法5：
this.$router.push('/user?uname=' + jsmes)

獲取參數(shù)：通過$route.query 獲取傳遞的值

Vue-Router導(dǎo)航守衛(wèi)

有的時(shí)候，需要通過路由來(lái)進(jìn)行一些操作，比如最常見的登錄權(quán)限驗(yàn)證，當(dāng)用戶滿足條件時(shí)，才讓其進(jìn)入導(dǎo)航，否則就取消跳轉(zhuǎn)，并跳到登錄頁(yè)面讓其登錄。為此有很多種方法可以植入路由的導(dǎo)航過程：全局的，單個(gè)路由獨(dú)享的，或者組件級(jí)的。

全局路由鉤子

vue-router全局有三個(gè)守衛(wèi)：

router.beforeEach 全局前置守衛(wèi) 進(jìn)入路由之前。
router.beforeResolve 全局解析守衛(wèi)，在beforeRouteEnter調(diào)用之后調(diào)用。
router.afterEach 全局后置鉤子進(jìn)入路由之后。

to、from、next這三個(gè)參數(shù)：

to和from是將要進(jìn)入和將要離開的路由對(duì)象,路由對(duì)象指的是平時(shí)通過this.$route獲取到的路由對(duì)象。next:Function 這個(gè)參數(shù)是個(gè)函數(shù)，且必須調(diào)用，否則不能進(jìn)入路由(頁(yè)面空白)。

next() 進(jìn)入該路由。
next(false): 取消進(jìn)入路由，url地址重置為from路由地址(也就是將要離開的路由地址)。

router.beforeEach

router.beforeEach是全局前置守衛(wèi)，進(jìn)入路由之前。

router.beforeEach((to, from, next) => {  
    let ifInfo =Vue.prototype.$common.getSession('userData');  // 判斷是否登錄的存儲(chǔ)信息
    if (!ifInfo) { 
        // sessionStorage里沒有儲(chǔ)存user信息    
        if (to.path == '/') { 
            //如果是登錄頁(yè)面路徑，就直接next()      
            next();    
        } else { 
            //不然就跳轉(zhuǎn)到登錄      
            Message.warning("請(qǐng)重新登錄！");     
            window.location.href = Vue.prototype.$loginUrl;    
        }  
    } else {    
        return next();  
    }
})

路由獨(dú)享守衛(wèi)

如果你不想全局配置守衛(wèi)的話，你可以為某些路由單獨(dú)配置守衛(wèi)：

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home,
      beforeEnter: (to, from, next) => { 
        // 參數(shù)用法什么的都一樣,調(diào)用順序在全局前置守衛(wèi)后面，所以不會(huì)被全局守衛(wèi)覆蓋
        // ...
      }
    }
  ]
})

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

beforeRouterEnter

beforeRouterEnter不能訪問this是因?yàn)殂^子在組件實(shí)例還沒被創(chuàng)建的時(shí)候調(diào)用，所以不能獲取組件實(shí)例 this，可以通過傳一個(gè)回調(diào)給next來(lái)訪問組件實(shí)例。

beforeRouteEnter (to, from, next) {
console.log('在路由獨(dú)享守衛(wèi)后調(diào)用');
  next(vm => {
    // 通過 `vm` 訪問組件實(shí)例`this` 執(zhí)行回調(diào)的時(shí)機(jī)在mounted后面，
  })
}

beforeRouteUpdate

  beforeRouteUpdate (to, from, next) {
    // 在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用 可以訪問組件實(shí)例 `this`
    // 舉例來(lái)說，對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /user/:id，在 /user/1 和 /user/2 之間跳轉(zhuǎn)的時(shí)候，
    // 由于會(huì)渲染同樣的 user 組件，因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。
  }

beforeRouteLeave

導(dǎo)航離開該組件的對(duì)應(yīng)路由時(shí)調(diào)用，我們用它來(lái)禁止用戶離開，比如還未保存草稿，或者在用戶離開前，將setInterval銷毀，防止離開之后，定時(shí)器還在調(diào)用。

beforeRouteLeave (to, from , next) {
  if (文章保存) {
    next(); // 允許離開或者可以跳到別的路由 上面講過了
  } else {
    next(false); // 取消離開
  }
}

Vue路由鉤子在生命周期函數(shù)的體現(xiàn)

完整的路由導(dǎo)航解析流程（不包括其他生命周期）：

觸發(fā)進(jìn)入其他路由。
調(diào)用要離開路由的組件守衛(wèi)beforeRouteLeave
調(diào)用全局前置守衛(wèi)∶ beforeEach
在重用的組件里調(diào)用 beforeRouteUpdate
調(diào)用路由獨(dú)享守衛(wèi) beforeEnter。
解析異步路由組件。
在將要進(jìn)入的路由組件中調(diào)用 beforeRouteEnter
調(diào)用全局解析守衛(wèi) beforeResolve
導(dǎo)航被確認(rèn)。
調(diào)用全局后置鉤子的 afterEach 鉤子。
觸發(fā)DOM更新（mounted）。
執(zhí)行beforeRouteEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù)。

keep-alive

在開發(fā)vue項(xiàng)目中，大部分組件是沒必要多次渲染的，所以vue提供了一個(gè)內(nèi)置組件keep-alive來(lái)緩存組件內(nèi)部狀態(tài)，避免重新渲染。

文檔：和相似，是一個(gè)抽象組件：它自身不會(huì)渲染一個(gè) DOM 元素，也不會(huì)出現(xiàn)在父組件鏈中。

生命周期鉤子

在被keep-alive包含的組件/路由中，會(huì)多出兩個(gè)生命周期的鉤子:activated 與 deactivated。

activated

activated在組件第一次渲染時(shí)會(huì)被調(diào)用，之后在每次緩存組件被激活時(shí)調(diào)用。第一次進(jìn)入緩存路由/組件，在mounted后面，beforeRouteEnter守衛(wèi)傳給 next 的回調(diào)函數(shù)之前調(diào)用：

beforeMount=>別的路由進(jìn)來(lái)(destroyed/deactivated)=>
mounted=> activated 進(jìn)入緩存組件 => 執(zhí)行 beforeRouteEnter回調(diào)

因?yàn)榻M件被緩存了，再次進(jìn)入緩存路由/組件時(shí)，不會(huì)觸發(fā)這些鉤子：beforeCreate ，created ，beforeMount ，mounted 。

所以之后的調(diào)用時(shí)機(jī)是：

組件銷毀destroyed/或離開緩存deactivated => activated 進(jìn)入當(dāng)前緩存組件 => 執(zhí)行 beforeRouteEnter回調(diào)

deactivated

組件被停用(離開路由)時(shí)調(diào)用，使用了keep-alive就不會(huì)調(diào)用beforeDestroy(組件銷毀前鉤子)和destroyed(組件銷毀)，因?yàn)榻M件沒被銷毀，被緩存起來(lái)了。

這個(gè)鉤子可以看作beforeDestroy的替代，如果你緩存了組件，要在組件銷毀的時(shí)候做一些事情，你可以放在這個(gè)鉤子里。如果你離開了路由，會(huì)依次觸發(fā)：

組件內(nèi)的離開當(dāng)前路由鉤子beforeRouteLeave =>  路由前置守衛(wèi) beforeEach =>全局后置鉤子afterEach => deactivated 離開緩存組件 => activated 進(jìn)入緩存組件(如果你進(jìn)入的也是緩存路由)
// 如果離開的組件沒有緩存的話 beforeDestroy會(huì)替換deactivated 
// 如果進(jìn)入的路由也沒有緩存的話  全局后置鉤子afterEach=>銷毀 destroyed=> beforeCreate等

那么，如果我只是想緩存其中幾個(gè)路由/組件，那該怎么做？

Vue2.1.0之前：兩個(gè)keep-alive標(biāo)簽+v-if判斷

   <keep-alive>
     <router-view v-if="$route.meta.keepAlive">
         <!--這里是會(huì)被緩存的路由-->
     </router-view>
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive">
     <!--因?yàn)橛玫氖莢-if 所以下面還要?jiǎng)?chuàng)建一個(gè)未緩存的路由視圖出口-->
 </router-view>
 //router配置
 new Router({
   routes: [
     {
       path: '/',
       name: 'home',
       component: Home,
       meta: {
         keepAlive: true // 需要被緩存
       }
     },
     {
       path: '/:id',
       name: 'edit',
       component: Edit,
       meta: {
         keepAlive: false // 不需要被緩存
       }
     }
   ]
 });

Vue2.1.0版本之后： Vue新增了兩個(gè)屬性配合keep-alive來(lái)有條件地緩存路由/組件。

include：匹配的路由/組件會(huì)被緩存
exclude：匹配的路由/組件不會(huì)被緩存（優(yōu)先級(jí)大）

include和exclude支持三種方式來(lái)有條件的緩存路由：采用逗號(hào)分隔的字符串形式，正則形式，數(shù)組形式。正則和數(shù)組形式，必須采用v-bind形式來(lái)使用。

<keep-alive include="a,b">//逗號(hào)分隔形式
  <component :is="view"></component>
</keep-alive>

觸發(fā)鉤子的完整順序

將路由導(dǎo)航、keep-alive、和組件生命周期鉤子結(jié)合起來(lái)的，觸發(fā)順序，假設(shè)是從a組件離開，第一次進(jìn)入b組件：

beforeRouteLeave:路由組件的組件離開路由前鉤子，可取消路由離開。
beforeEach: 路由全局前置守衛(wèi)，可用于登錄驗(yàn)證、全局路由loading等。
beforeEnter: 路由獨(dú)享守衛(wèi)
beforeRouteEnter: 路由組件的組件進(jìn)入路由前鉤子。
beforeResolve:路由全局解析守衛(wèi)
afterEach:路由全局后置鉤子
beforeCreate:組件生命周期，不能訪問this。
created:組件生命周期，可以訪問this，不能訪問dom。
beforeMount:組件生命周期
deactivated: 離開緩存組件a，或者觸發(fā)a的beforeDestroy和destroyed組件銷毀鉤子。
mounted:訪問/操作dom。
activated:進(jìn)入緩存組件，進(jìn)入a的嵌套子組件(如果有的話)。
執(zhí)行beforeRouteEnter回調(diào)函數(shù)next。

其實(shí)大部分的生命周期鉤子函數(shù)不會(huì)被用到，但有幾點(diǎn)我們需要注意：

1.ajax請(qǐng)求最好放在created里面，此時(shí)可以訪問到this，請(qǐng)求返回?cái)?shù)據(jù)可以放在data里面。

2.關(guān)于dom的操作要放在mounted里面，在mounted前面訪問dom會(huì)是undefined,因?yàn)檫€沒渲染完成。

3.每次進(jìn)入或離開組件需要一些操作時(shí)：

不緩存

進(jìn)入的時(shí)候可以用created和mounted鉤子，離開的時(shí)候用beforeDestory和destroyed鉤子,beforeDestory可以訪問this，destroyed不可以訪問this。

緩存了的組件：

緩存了組件之后，再次進(jìn)入組件不會(huì)觸發(fā)beforeCreate、created 、beforeMount、 mounted，如果你想每次進(jìn)入組件都做一些事情的話，你可以放在activated進(jìn)入緩存組件的鉤子中。同理：離開緩存組件的時(shí)候，beforeDestroy和destroyed并不會(huì)觸發(fā)，可以使用deactivated離開緩存組件的鉤子來(lái)代替。