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)文章
vue 將多個(gè)過濾器封裝到一個(gè)文件中的代碼詳解
這篇文章主要介紹了vue 將多個(gè)過濾器封裝到一個(gè)文件中實(shí)現(xiàn)方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2020-09-09
Vue實(shí)現(xiàn)動(dòng)態(tài)響應(yīng)數(shù)據(jù)變化
本篇文章主要介紹了Vue 動(dòng)態(tài)響應(yīng)數(shù)據(jù)變化,通過綁定數(shù)據(jù)即可以實(shí)時(shí)改變視圖顯示,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-04-04
記一次Vue.js混入mixin的使用(分權(quán)限管理頁面)
這篇文章主要介紹了記一次Vue.js混入mixin的使用(分權(quán)限管理頁面),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
vue元素實(shí)現(xiàn)動(dòng)畫過渡效果
這篇文章主要介紹了vue元素實(shí)現(xiàn)動(dòng)畫過渡效果,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
詳解Vue中Computed與watch的用法與區(qū)別
這篇文章主要介紹了Vue中computed和watch的使用與區(qū)別,文中通過示例為大家進(jìn)行了詳細(xì)講解,對(duì)Vue感興趣的同學(xué),可以學(xué)習(xí)一下2022-04-04
Vue項(xiàng)目中quill-editor帶樣式編輯器的使用方法
這篇文章主要介紹了Vue項(xiàng)目中quill-editor帶樣式編輯器的使用方法,可以更改插入圖片和視頻,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08

