Vue?動(dòng)態(tài)路由的實(shí)現(xiàn)詳情
前言:
動(dòng)態(tài)路由是一個(gè)常用的功能,根據(jù)后臺(tái)返回的路由json表,前端動(dòng)態(tài)顯示可跳轉(zhuǎn)的路由項(xiàng),下面來講解一下具體的實(shí)現(xiàn)方式:
大致業(yè)務(wù)需求:前端在login登陸頁,輸入賬號(hào)密碼后,點(diǎn)擊登陸,接口返回登陸成功的同時(shí),也會(huì)把該用戶可操作的路由鏈表返回給前端(JSON數(shù)組格式),前端拿到這個(gè)JSON數(shù)組,來渲染成側(cè)邊欄列表(說的是PC端),我們需要將所有的頁面都寫好,然后去匹配后臺(tái)返回的部分路由來進(jìn)行展示(比如項(xiàng)目一共有100個(gè)頁面,后臺(tái)返回了10個(gè)路由地址,那么我們只展示返回的對(duì)應(yīng)的10個(gè)即可)
說一下思路:
我們可以將路由分為3個(gè)部分:
- 1.默認(rèn)展示的部分(包括login頁面、404頁面等等)
- 2.后臺(tái)返回的部分(具有權(quán)限操作的部分路由)
- 3.全部動(dòng)態(tài)路由(比如后臺(tái)返回了10個(gè)路由地址,我們?nèi)縿?dòng)態(tài)的路由是100個(gè)地址,所做的就是將100個(gè)全部動(dòng)態(tài)路由里面和后臺(tái)返回的對(duì)應(yīng)匹配的10個(gè)路由追加到默認(rèn)路由里面,就可以完成動(dòng)態(tài)路由的流程了)
正常路由,我們的寫法大概是這樣的:
//src/router/index.js import Router from 'vue-router' Vue.use(Router) const Routes = [ { path:'/', component:Login, meta: { title: '登錄頁' } }, { path:'/Home', component:Home, meta: { title: 'Home主頁' } } ] const Routers = new Router({ routes: Routes }) export default Routers;
我們要做動(dòng)態(tài)路由,就需要改變一下這個(gè)結(jié)構(gòu)(分為動(dòng)態(tài)+靜態(tài)),這里的靜態(tài)是指需要匹配展示對(duì)應(yīng)的,所以,我們需要在建一個(gè)全部的路由JSON
//stc/router/index.js const defaultRoutes = [ //...這默認(rèn)路由就是上面代碼內(nèi)的登錄頁/404頁面... ] const allRouters = [//這里就是全部動(dòng)態(tài)路由 { path:'/UserList', component:UserList, meta: { title: '人員管理' } }, { path:'/PwdList', component:PwdList, meta: { title: '密碼管理' } } ] const Routers = new Router({ routes: defaultRoutes//默認(rèn)渲染 -> 默認(rèn)路由 }) export default Routers;
所有的靜態(tài)路由和動(dòng)態(tài)路由,都寫完了,接下來就是關(guān)鍵部分(將后臺(tái)返回的路由json拼接到route內(nèi)),由于我們是在login頁面點(diǎn)擊登陸后,進(jìn)行的跳轉(zhuǎn),所以,把代碼寫到路由鉤子內(nèi)(Routers.beforeach函數(shù))
Routers.beforeEach((to,from,next) => { if(to.path != '/' && !store.state.isLogin) { //跳轉(zhuǎn)的不是首頁 同時(shí) 用戶還未登陸 //這個(gè)判斷,我們就可以基本判定用戶是在做登陸時(shí)候的跳轉(zhuǎn) //↓拿到登陸時(shí),接口返回的路由數(shù)組(vuex內(nèi)),大致是這樣的 let resRouterArr = [ { routeName: '人員管理', children: [ { routeName: '銷售管理', ... }, { routeName: '內(nèi)勤管理', ... } ] } ] let routerArr = [] resRouterArr.forEach(item => { allRouters.forEach(all => { if(item.routeName == all.routeName) { //拿到本地路由對(duì)象 let obj = JSON.parse(JSON.stringify(all)) let childrenRouter = [] if(item.children && item.children.length > 0) { item.children.forEach(childItem => { all.children.forEach(allItem => { if(childItem.routeName == allItem.routerName) { childrenRouter.push(allItem) } }) }) obj.children = childrenRouter } routerArr.push(obj) } }) }) Routers.addroutes(routerArr)//addroutes為添加路由數(shù)組的方法 store.commit('domRouteTree',rousterArr)//存儲(chǔ)進(jìn)vuex,之后頁面左右路由列表渲染使用 next({...to,replace:true})//進(jìn)行路由跳轉(zhuǎn) } else { next() } })
這樣,我們跳轉(zhuǎn)到之后的業(yè)務(wù)頁面,就可以看到列表左側(cè)生成的動(dòng)態(tài)路由列表了,點(diǎn)擊左側(cè)的幾個(gè)動(dòng)態(tài)生成的路由,也很nice,么得問題~
ps:這里遇到了一個(gè)坑,踩了一會(huì)兒,也記上
以前都是這樣寫的:
import UserList from '@/views/User/UserList'
但是跳轉(zhuǎn)過去之后,頁面就會(huì)出現(xiàn)白屏報(bào)錯(cuò)的情況,查了半天,原來要補(bǔ)齊路徑
import UserList from '@/views/User/UserList.vue'
到此這篇關(guān)于Vue 動(dòng)態(tài)路由的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue 動(dòng)態(tài)路由 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue2.0 v-for filter列表過濾功能的實(shí)現(xiàn)
今天小編就為大家分享一篇Vue2.0 v-for filter列表過濾功能的實(shí)現(xiàn),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue2.0/3.0中provide和inject的用法示例
provide和inject是成對(duì)出現(xiàn)的,主要用于父組件向子孫組件傳遞數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于vue2.0/3.0中provide和inject用法的相關(guān)資料,需要的朋友可以參考下2021-09-09關(guān)于vue的element-ui web端引入高德地圖并獲取經(jīng)緯度
這篇文章主要介紹了關(guān)于vue的element-ui web端引入高德地圖并獲取經(jīng)緯度,高德地圖首先要去申請(qǐng)key和密鑰,文中提供了部分實(shí)現(xiàn)代碼和解決思路,感興趣的朋友可以學(xué)習(xí)一下2023-04-04element使用自定義icon圖標(biāo)的兩種解決方式
因?yàn)榘惭b原型圖設(shè)計(jì)實(shí)現(xiàn)頁面,在element自帶的圖標(biāo)庫好像沒有,所以按鈕的圖標(biāo)icon需要自定義,下面這篇文章主要給大家介紹了關(guān)于element使用自定義icon圖標(biāo)的兩種解決方式,需要的朋友可以參考下2022-07-07