vue的路由守衛(wèi)和keep-alive后生命周期詳解
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í)候,需要通過路由來進(jìn)行一些操作,比如最常見的登錄權(quán)限驗(yàn)證,當(dāng)用戶滿足條件時(shí),才讓其進(jìn)入導(dǎo)航,否則就取消跳轉(zhuǎn),并跳到登錄頁面讓其登錄。 為此有很多種方法可以植入路由的導(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)入路由(頁面空白)。
- 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 == '/') {
//如果是登錄頁面路徑,就直接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來訪問組件實(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`
// 舉例來說,對(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)用,我們用它來禁止用戶離開,比如還未保存草稿,或者在用戶離開前,將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來緩存組件內(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)來(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件沒被銷毀,被緩存起來了。
這個(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來有條件地緩存 路由/組件。
- include:匹配的 路由/組件 會(huì)被緩存
- exclude:匹配的 路由/組件 不會(huì)被緩存(優(yōu)先級(jí)大)
include和exclude支持三種方式來有條件的緩存路由:采用逗號(hào)分隔的字符串形式,正則形式,數(shù)組形式。正則和數(shù)組形式,必須采用v-bind形式來使用。
<keep-alive include="a,b">//逗號(hào)分隔形式 <component :is="view"></component> </keep-alive>
觸發(fā)鉤子的完整順序
將路由導(dǎo)航、keep-alive、和組件生命周期鉤子結(jié)合起來的,觸發(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離開緩存組件的鉤子來代替。
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
VUE開發(fā)分布式醫(yī)療掛號(hào)系統(tǒng)的醫(yī)院設(shè)置頁面步驟
這篇文章主要為大家介紹了VUE開發(fā)分布式醫(yī)療掛號(hào)系統(tǒng)的醫(yī)院設(shè)置頁面步驟,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-04-04
vue跨窗口通信之新窗口調(diào)用父窗口方法實(shí)例
由于開發(fā)需要,我需要在登錄成功請(qǐng)求成功后,調(diào)用父窗口的一個(gè)點(diǎn)擊事件方法,這篇文章主要給大家介紹了關(guān)于vue跨窗口通信之新窗口調(diào)用父窗口的相關(guān)資料,需要的朋友可以參考下2023-01-01
Vue實(shí)現(xiàn)右鍵菜單組件的超詳細(xì)教程(支持快捷鍵)
右鍵菜單組件非常常見,所有的前端開發(fā)工程師都會(huì)遇到類似的功能組件開發(fā)需求,這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)右鍵菜單組件的超詳細(xì)教程,文中介紹的方法支持快捷鍵,需要的朋友可以參考下2024-02-02
關(guān)于dev-tool安裝方法(手動(dòng)安裝版)
這篇文章主要介紹了關(guān)于dev-tool安裝方法(手動(dòng)安裝版),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
基于vue v-for 多層循環(huán)嵌套獲取行數(shù)的方法
今天小編就為大家分享一篇基于vue v-for 多層循環(huán)嵌套獲取行數(shù)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09

