1. 前言
很多場景都是動(dòng)態(tài)路由,那今天來梳理下動(dòng)態(tài)路由
2. 動(dòng)態(tài)路由-場景-雜談
應(yīng)用場景 緊接上篇文章vue路由守衛(wèi)
上篇文章我相信有部分道友 就有個(gè)疑問,路由守衛(wèi) 也可以是權(quán)限控
制,
比方說根據(jù)用戶的級(jí)別,顯示的菜單是不一樣的,也就是所謂的權(quán)限控制
記得早期有個(gè)項(xiàng)目,需要權(quán)限控制到按鈕級(jí)別,同一個(gè)界面,不同用戶登錄,顯示界面有些按鈕有,有些沒有
3. addRoutes語法
參數(shù)是個(gè)數(shù)組,
routes參數(shù)名應(yīng)該已經(jīng)猜到了吧 ,就是你的路由配置表,在這動(dòng)態(tài)添加
這就是編程的方式,在運(yùn)行時(shí),動(dòng)態(tài)的添加路由的原理
router.addRoutes(routes)
記得上篇文章的例子
address界面判斷用戶是否登錄
還拿這個(gè)做例子
4. 需求
只有管理員才顯示
address這個(gè)界面
也就是登錄的時(shí)候肯定根據(jù)用戶信息判斷是否配置這個(gè)路由
而不是不管啥用戶級(jí)別,都一股腦的配置在
路由表里
邏輯分析
動(dòng)態(tài)路由配置.png
5. 路由邏輯代碼實(shí)現(xiàn)
// ******************** 動(dòng)態(tài)路由
// 全局守衛(wèi)
router.beforeEach((to,from,next)=>{
// 判斷路由是否需要守衛(wèi)
//meta數(shù)據(jù)的方式
if(window.isLogin){
// 已登錄
if(to.path ==="/login"){
next("/")
}else{
next()
}
}else{
// 未登錄
if(to.path ==="/login"){
next()
}else{
next("/login?redirect="+to.fullPath)
// 傳參的方式比較多
//next({name:"Login",params:{toRouterName:to.name}})
}
}
})
6. 登錄邏輯實(shí)現(xiàn)
整體思路就是 在 跳轉(zhuǎn)之前把路由添加上去
6.1 addRoutes
logOut() {
window.isLogin = false;
console.log(this.$route);
this.$router.push("/");
},
loginBtn() {
window.isLogin = true;
console.log("添加前:", this.$route);
// 動(dòng)態(tài)添加
this.$router.addRoutes([
{
path: "/address",
name: "Address",
component: () => import("../views/address.vue")
},
]);
console.log("添加后:", this.$route);
// 不同的傳參方式,對(duì)應(yīng)不同的接收方式
//this.$router.push({name:this.$route.params.toRouterName})
this.$router.push(this.$route.query.redirect);
}
6.2 addRoute
router.addRoutes
已廢棄：使用router.addRoute()代替宿百。
6.3 一個(gè)參數(shù)
添加一條新路由規(guī)則。如果該路由規(guī)則有 name砍濒，并且已經(jīng)存在一個(gè)與之相同的名字诲侮，則會(huì)覆蓋它饶辙。
6.3.1語法
addRoute(route: RouteConfig): () => void
6.3.2實(shí)際代碼
// 實(shí)際開發(fā)情況 可以根據(jù)用戶的級(jí)別 ,添加不同的 路由界面
const serve = {
path: "/serve",
name: "servePage",
component: () => import("@/views/serve.vue")
}
this.$router.addRoute(serve);
//測試
this.$router.push("serve")
1.
path路徑/ 必須寫
2.注意這個(gè)因?yàn)槭莿?dòng)態(tài)添加的不能通過在瀏覽器地址的直接輸入path路徑的形式跳轉(zhuǎn)
6.4 2個(gè)參數(shù)
添加一條新的路由規(guī)則記錄作為現(xiàn)有路由的子路由耳幢。如果該路由規(guī)則有 name模暗，并且已經(jīng)存在一個(gè)與之相同的名字禁悠，則會(huì)覆蓋它
其實(shí)就是添加子路由
6.4.1 語法
addRoute(parentName: string, route: RouteConfig): () => void
6.4.2 二級(jí)路由
1.png
6.4.3 改造
const serve = {
path: "/one/wait",
name: "wait",
component: () => import("@/views/page/wait.vue")
}
this.$router.addRoute("/one/wait",serve);
this.$router.push("/one/wait") //測試
1.
path路徑/ 必須寫,而且必須帶上一級(jí)路徑的path
2.addRoute參數(shù)1,是父路由的path或者是父路由的name
7.路由緩存
界面在來回點(diǎn)擊 鏈接,通過路由跳轉(zhuǎn)的情況下,每次都會(huì)發(fā)送請(qǐng)求
如果確定 這些界面的數(shù)據(jù)短期內(nèi)不會(huì)變的情況下,可以進(jìn)行緩存
keep-alive
<keep-alive>
<router-view />
</keep-alive>
用
keep-alive包裹我們的路由,這樣以后再進(jìn)這個(gè)界面,請(qǐng)求就不會(huì)在發(fā)送了
8. 緩存配置
注意和組件 name屬性值保持一致
1.png
8.1. include 指定緩存路由
字符串或正則表達(dá)式。只有名稱匹配的組件會(huì)被緩存
- 單個(gè)緩存
<keep-alive include="shop">
<router-view />
</keep-alive>
- 多個(gè)緩存寫法
**,**隔開
<keep-alive include="shop,my">
<router-view />
</keep-alive>
- 變量動(dòng)態(tài)寫法
**:**綁定 值是個(gè)數(shù)組
<keep-alive :include="[]">
<router-view />
</keep-alive>
8.4 exclude
字符串或正則表達(dá)式兑宇。任何名稱匹配的組件都不會(huì)被緩存碍侦。
8.5 max - 數(shù)字,最多可以緩存多少組件實(shí)例。
9.鉤子
activated(){
console.log("active-被 keep-alive 緩存的組件激活時(shí)調(diào)用顾孽。")
},
deactivated(){
console.log("deactivated被 keep-alive 緩存的組件停用時(shí)調(diào)用")
}
