Vue router的addRoute方法實(shí)現(xiàn)控制權(quán)限方法詳解
路由分為靜態(tài)路由和動(dòng)態(tài)路由
靜態(tài)路由和動(dòng)態(tài)路由的優(yōu)缺點(diǎn)
1、中大型項(xiàng)目,采用的都是動(dòng)態(tài)路由方式,因?yàn)楹笈_(tái)導(dǎo)航目錄運(yùn)營(yíng)人員可能會(huì)新增菜單,新增菜單后,前端人員得在路由表手動(dòng)填加上,這樣導(dǎo)航才能點(diǎn)擊才能對(duì)應(yīng)上頁面,這樣比較麻煩。
2、如果是動(dòng)態(tài)路由,運(yùn)營(yíng)人員新增目錄后,因?yàn)槲沂莿?dòng)態(tài)路由獲取永遠(yuǎn)是最新的路徑,一次性通過動(dòng)態(tài)填加的方式加進(jìn)去,后邊就不用管路由的事了,只關(guān)心頁面就可以了,也是對(duì)權(quán)限管理的一種方法。
動(dòng)態(tài)路由實(shí)現(xiàn)思路
在全局路由守衛(wèi)中,先判斷token值有沒有。有的話先看是否存儲(chǔ)過,如果存儲(chǔ)過直接,頁面調(diào)用渲染,如果沒有,就請(qǐng)求接口,把路由表存儲(chǔ)下,除非沒有token,跳轉(zhuǎn)登錄頁面
路由表里-把那些常規(guī)路由(不需要權(quán)限的路由,事先都寫到路由表里)。把需要權(quán)限的路由通過router.addRoute()
動(dòng)態(tài)填加到對(duì)應(yīng)的子路由里 。
動(dòng)態(tài)填加的路由需要處理下。因?yàn)楹蠖藗鹘o你的是樹狀結(jié)構(gòu),一般前端需要把樹結(jié)構(gòu)處理成列表結(jié)構(gòu)(通過遞歸,不斷的獲取路徑,名字那些信息),填加到路由表里。(我沒寫 )
動(dòng)態(tài)路由遇到的問題與解決方式
- 登錄后路由表里在次加載一遍動(dòng)態(tài)路由-解決第1次頁面點(diǎn)擊找不到路徑問題,因?yàn)槁酚墒莿?dòng)態(tài)生成的,登錄后路由沒有被在次生成,路由表里是空的。所以在路由里要在次生成一遍
- 也有可能是因?yàn)槟愕穆酚杀砝镉型ㄅ渎酚?,你的書寫位置也不是入口文件處,可能就?04頁面。
- 登錄后跳轉(zhuǎn)其它頁面,如果刷新,頁面找不到問題?原因是路由是動(dòng)態(tài)的,它是在登錄后生成的,而其它頁面沒有在次生成動(dòng)態(tài)路由,所以就找不到。解決辦法:可在路由里,在生成一遍動(dòng)態(tài)路由。這樣不管在后臺(tái)哪個(gè)頁面,一刷新都會(huì)先執(zhí)行。(路由先走)
- 具體方法是在入口文件當(dāng)中,通過全局前置路由守衛(wèi)獲取router路由(考慮到在main.js中這個(gè)文件比較繁瑣),新文件重新導(dǎo)入
獲取主路由的一個(gè)子數(shù)組信息。
router.beforeEach((to,from,next)=>{ console.log(router);/* 路由對(duì)象 */ console.log(router.options.routes);/* 前端路由實(shí)例對(duì)象數(shù)組(根組) */ console.log(router.options.routes[0]);/* 需要在里面動(dòng)態(tài)添加子路由的一個(gè)根組,插入的也是這個(gè)根組對(duì)象 */ console.log(router.options.routes[0].children);/* 獲取這個(gè)根組下的子路由數(shù)組 */ /*純粹的一次添加路由,其實(shí)通過服務(wù)器根據(jù)權(quán)限獲取路由信息*/ if(router.options.routes[0].children.length == 4 && to.path!="/login"){ router.options.routes[0].children.unshift({path:"test",component:()=>import("@/views/test.vue")}) router.addRoute(router.options.routes[0]); next({ path: to.path, // 動(dòng)態(tài)添加一個(gè)新的路由 replace: true // 重定向,為了讓剛剛添加的路由規(guī)則生效 }); }else{ next(); } })
也可以寫成:
let newT = router.options.routes[0];/* 需要在里面動(dòng)態(tài)添加子路由的一個(gè)根組,插入的也是這個(gè)根組對(duì)象 */ if (newT.children.length == 4 && to.path != "/login") {//條件保護(hù),防止全局路由守衛(wèi)死循環(huán)執(zhí)行。 newT.children.unshift({ path: "test", component: () => import("@/views/test.vue") }) //給子路由添加一條數(shù)據(jù) router.addRoute(newT); next({ path: to.path, replace: true }); } else { next() }
可以看的出來:addRoute 添加一條新的路由記錄是一個(gè)對(duì)象 router.addRoute({});
同時(shí)這個(gè)路由作為現(xiàn)有路由的子路由,如果路由有一個(gè)name,或者地址一樣,就會(huì)刪除之前的路由信息,重新加進(jìn)去這個(gè)路由?;蛘咭呀?jīng)有一個(gè)與之名字相同的路由,它會(huì)先刪除之前的路由;
注意:新添加的路由并不會(huì)觸發(fā)新的導(dǎo)航
需要:
next({ path: to.path, // 動(dòng)態(tài)添加一個(gè)新的路由 replace: true // 重定向,為了讓剛剛添加的路由規(guī)則生效 });
vue-router的addRoute方法實(shí)現(xiàn)權(quán)限控制
到此這篇關(guān)于Vue router的addRoute方法實(shí)現(xiàn)控制權(quán)限方法詳解的文章就介紹到這了,更多相關(guān)Vue控制權(quán)限內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
解決在vue的mounted中獲取對(duì)象為null問題
這篇文章主要介紹了解決在vue的mounted中獲取對(duì)象為null問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03vue使用v-for實(shí)現(xiàn)hover點(diǎn)擊效果
hover是css中的選擇器,用于選擇鼠標(biāo)指針浮動(dòng)在上面的元素。這篇文章主要介紹了vue使用v-for實(shí)現(xiàn)hover點(diǎn)擊效果,需要的朋友可以參考下2018-09-09vue.js數(shù)據(jù)綁定的方法(單向、雙向和一次性綁定)
本篇文章主要介紹了vue.js數(shù)據(jù)綁定的方法(單向、雙向和一次性綁定),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07解決微信瀏覽器緩存站點(diǎn)入口文件(IIS部署Vue項(xiàng)目)
這篇文章主要介紹了解決微信瀏覽器緩存站點(diǎn)入口文件(IIS部署Vue項(xiàng)目),本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06Vue3實(shí)現(xiàn)跨頁面?zhèn)髦档膸追N常見方法
在Vue 3中,跨頁面?zhèn)髦悼梢酝ㄟ^多種方式實(shí)現(xiàn),具體選擇哪種方法取決于應(yīng)用的具體需求和頁面間的關(guān)系,本文列舉了幾種常見的跨頁面?zhèn)髦捣椒?感興趣的同學(xué)跟著小編來看看吧2024-04-04vue elementui 實(shí)現(xiàn)搜索欄公共組件封裝的實(shí)例代碼
這篇文章主要介紹了vue elementui 搜索欄公共組件封裝,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01vue-router(this.$router)如何在新窗口打開路由跳轉(zhuǎn)頁面
這篇文章主要介紹了vue-router(this.$router)如何在新窗口打開路由跳轉(zhuǎn)頁面問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12vue2實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求顯示loading圖
這篇文章主要為大家詳細(xì)介紹了vue2實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求顯示loading圖,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11vue3如何通過provide和inject實(shí)現(xiàn)多層級(jí)組件通信
這篇文章主要介紹了vue3如何通過provide和inject實(shí)現(xiàn)多層級(jí)組件通信,本文通過實(shí)例代碼給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-11-11vue項(xiàng)目如何部署運(yùn)行到tomcat上
這篇文章主要介紹了vue項(xiàng)目如何部署運(yùn)行到tomcat上的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01