1. 前言
- 很多場景都是動態(tài)路由,那今天來梳理下動態(tài)路由
2. 動態(tài)路由-場景-雜談
- 應(yīng)用場景 緊接上篇文章vue路由守衛(wèi)
- 上篇文章我相信有部分道友 就有個(gè)疑問,路由守衛(wèi) 也可以是權(quán)限控制,
- 比方說根據(jù)用戶的級別,顯示的菜單是不一樣的,也就是所謂的權(quán)限控制
- 記得早期有個(gè)項(xiàng)目,需要權(quán)限控制到按鈕級別,同一個(gè)界面,不同用戶登錄,顯示界面有些按鈕有,有些沒有,其他都一樣
3. addRoutes語法
- 參數(shù)是個(gè)數(shù)組,
routes參數(shù)名應(yīng)該已經(jīng)猜到了吧 ,就是你的路由配置表,在這動態(tài)添加- 這就是編程的方式,在運(yùn)行時(shí),動態(tài)的添加路由的原理
//vue-router 3x寫法
router.addRoutes(routes)
//vue-router 4x寫法
router.addRoute(routes)
- 記得上篇文章的例子
address界面判斷用戶是否登錄- 還拿這個(gè)做例子
4. 需求
- 只有管理員才顯示
address這個(gè)界面- 也就是登錄的時(shí)候肯定根據(jù)用戶信息判斷是否配置這個(gè)路由
- 而不是不管啥用戶級別,都一股腦的配置在
路由表里
邏輯分析
動態(tài)路由配置.png
5. 路由邏輯代碼實(shí)現(xiàn)
// ******************** 動態(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);
// 動態(tài)添加
this.$router.addRoutes([
{
path: "/address",
name: "Address",
component: () => import("../views/address.vue")
},
]);
console.log("添加后:", this.$route);
// 不同的傳參方式,對應(yīng)不同的接收方式
//this.$router.push({name:this.$route.params.toRouterName})
this.$router.push(this.$route.query.redirect);
}
6.2 addRoute
router.addRoutes
已廢棄：使用router.addRoute()代替。setTimeout只是為了模擬異步請求的情況
setTimeout(() => {
this.$router.addRoute({ path: '/add', component: AddView })
// 第一個(gè)參數(shù)是想要給哪個(gè)路由添加子路由
// 就寫哪個(gè)路由的別名/name
this.$router.addRoute('News',{ path: '/plus', name:'Plus', component: AddView })
this.isAdd = true
}, 1000)
- 嵌套路由動態(tài)添加等價(jià)下面代碼
router.addRoute({
name: 'News',
path: '/news',
component: News,
children: [{ path: 'plus', component: AddView }],
})
6.3 一個(gè)參數(shù)
- 添加一條新路由規(guī)則诫惭。如果該路由規(guī)則有 name于樟，并且已經(jīng)存在一個(gè)與之相同的名字，則會覆蓋它血当。
6.3.1語法
addRoute(route: RouteConfig): () => void
6.3.2實(shí)際代碼
// 實(shí)際開發(fā)情況 可以根據(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)槭莿討B(tài)添加的不能通過在瀏覽器地址的直接輸入path路徑的形式跳轉(zhuǎn)
6.4 2個(gè)參數(shù)
- 添加一條新的路由規(guī)則記錄作為現(xiàn)有路由的子路由。如果該路由規(guī)則有 name禀忆，并且已經(jīng)存在一個(gè)與之相同的名字臊旭，則會覆蓋它
- 其實(shí)就是添加子路由
6.4.1 語法
addRoute(parentName: string, route: RouteConfig): () => void
6.4.2 二級路由
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路徑/ 必須寫,而且必須帶上一級路徑的path
2.addRoute參數(shù)1,是父路由的path或者是父路由的name
7.路由緩存
- 界面在來回點(diǎn)擊 鏈接,通過路由跳轉(zhuǎn)的情況下,每次都會發(fā)送請求
- 如果確定 這些界面的數(shù)據(jù)短期內(nèi)不會變的情況下,可以進(jìn)行緩存
keep-alive
<keep-alive>
<router-view />
</keep-alive>
用
keep-alive包裹我們的路由,這樣以后再進(jìn)這個(gè)界面,請求就不會在發(fā)送了
8. 緩存配置
注意和組件 name屬性值保持一致
1.png
8.1. include 指定緩存路由
1.字符串或正則表達(dá)式。只有名稱匹配的組件會被緩存
- 單個(gè)緩存
<keep-alive include="shop">
<router-view />
</keep-alive>
- 多個(gè)緩存寫法
**,**隔開
<keep-alive include="shop,my">
<router-view />
</keep-alive>
- 變量動態(tài)寫法
**:**綁定 值是個(gè)數(shù)組
<keep-alive :include="[]">
<router-view />
</keep-alive>
8.4 exclude
字符串或正則表達(dá)式箩退。任何名稱匹配的組件都不會被緩存离熏。
8.5 max - 數(shù)字,最多可以緩存多少組件實(shí)例。
9.鉤子
activated(){
console.log("active-被 keep-alive 緩存的組件激活時(shí)調(diào)用戴涝。")
},
deactivated(){
console.log("deactivated被 keep-alive 緩存的組件停用時(shí)調(diào)用")
}
- 當(dāng)組件在 <keep-alive> 內(nèi)被切換時(shí)滋戳，它的
mounted和unmounted生命周期鉤子不會被調(diào)用，- 取而代之的是
activated和deactivated啥刻。(這會運(yùn)用在 <keep-alive> 的直接子節(jié)點(diǎn)及其所有子孫節(jié)點(diǎn)奸鸯。)
10. 后記
- 刪除動態(tài)路由
- 獲取動態(tài)路由等等可以看官網(wǎng)刪除路由
