Vue?動態(tài)路由的實現詳情
前言：
動態(tài)路由是一個常用的功能，根據后臺返回的路由json表，前端動態(tài)顯示可跳轉的路由項，下面來講解一下具體的實現方式：
大致業(yè)務需求：前端在login登陸頁，輸入賬號密碼后，點擊登陸，接口返回登陸成功的同時，也會把該用戶可操作的路由鏈表返回給前端（JSON數組格式），前端拿到這個JSON數組，來渲染成側邊欄列表（說的是PC端），我們需要將所有的頁面都寫好，然后去匹配后臺返回的部分路由來進行展示（比如項目一共有100個頁面，后臺返回了10個路由地址，那么我們只展示返回的對應的10個即可）
說一下思路：
我們可以將路由分為3個部分：
- 1.默認展示的部分（包括login頁面、404頁面等等）
- 2.后臺返回的部分（具有權限操作的部分路由）
- 3.全部動態(tài)路由（比如后臺返回了10個路由地址，我們全部動態(tài)的路由是100個地址，所做的就是將100個全部動態(tài)路由里面和后臺返回的對應匹配的10個路由追加到默認路由里面，就可以完成動態(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;我們要做動態(tài)路由，就需要改變一下這個結構（分為動態(tài)+靜態(tài)），這里的靜態(tài)是指需要匹配展示對應的，所以，我們需要在建一個全部的路由JSON
//stc/router/index.js
const defaultRoutes = [
//...這默認路由就是上面代碼內的登錄頁/404頁面...
]
const allRouters = [//這里就是全部動態(tài)路由
{
path:'/UserList',
component:UserList,
meta: {
title: '人員管理'
}
},
{
path:'/PwdList',
component:PwdList,
meta: {
title: '密碼管理'
}
}
]
const Routers = new Router({
routes: defaultRoutes//默認渲染 -> 默認路由
})
export default Routers;所有的靜態(tài)路由和動態(tài)路由，都寫完了，接下來就是關鍵部分（將后臺返回的路由json拼接到route內），由于我們是在login頁面點擊登陸后，進行的跳轉，所以，把代碼寫到路由鉤子內（Routers.beforeach函數）
Routers.beforeEach((to,from,next) => {
if(to.path != '/' && !store.state.isLogin) {
//跳轉的不是首頁 同時 用戶還未登陸
//這個判斷，我們就可以基本判定用戶是在做登陸時候的跳轉
//↓拿到登陸時，接口返回的路由數組（vuex內）,大致是這樣的
let resRouterArr = [
{
routeName: '人員管理',
children: [
{
routeName: '銷售管理',
...
},
{
routeName: '內勤管理',
...
}
]
}
]
let routerArr = []
resRouterArr.forEach(item => {
allRouters.forEach(all => {
if(item.routeName == all.routeName) {
//拿到本地路由對象
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為添加路由數組的方法
store.commit('domRouteTree',rousterArr)//存儲進vuex，之后頁面左右路由列表渲染使用
next({...to,replace:true})//進行路由跳轉
} else {
next()
}
})這樣，我們跳轉到之后的業(yè)務頁面，就可以看到列表左側生成的動態(tài)路由列表了，點擊左側的幾個動態(tài)生成的路由，也很nice，么得問題~
ps：這里遇到了一個坑，踩了一會兒，也記上
以前都是這樣寫的：
import UserList from '@/views/User/UserList'
但是跳轉過去之后，頁面就會出現白屏報錯的情況，查了半天，原來要補齊路徑
import UserList from '@/views/User/UserList.vue'
到此這篇關于Vue 動態(tài)路由的實現的文章就介紹到這了,更多相關Vue 動態(tài)路由 內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue 將多個過濾器封裝到一個文件中實現方法，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2020-09-09
這篇文章主要為大家介紹了vue3使用Vite打包組件庫從0搭建過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
Swiper常用于移動端網站的內容觸摸滑動,Swiper是純javascript打造的滑動特效插件,面向手機、平板電腦等移動終端,下面這篇文章主要給大家介紹了關于swiper在vue中的簡單使用方法,需要的朋友可以參考下2022-09-09
vuex里面有四個map方法，他們分別可以針對不同的元素進行不同的代碼生成，本文就來詳細的介紹一下vuex中的四個map方法，具有一定的參考價值，感興趣的可以了解一下2023-05-05
本篇文章主要介紹了Vue 動態(tài)響應數據變化，通過綁定數據即可以實時改變視圖顯示，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-04-04
這篇文章主要介紹了記一次Vue.js混入mixin的使用(分權限管理頁面)，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
這篇文章主要介紹了vue元素實現動畫過渡效果，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
詳解Vue中Computed與watch的用法與區(qū)別
這篇文章主要介紹了Vue中computed和watch的使用與區(qū)別，文中通過示例為大家進行了詳細講解，對Vue感興趣的同學，可以學習一下2022-04-04
這篇文章主要介紹了Vue項目中quill-editor帶樣式編輯器的使用方法，可以更改插入圖片和視頻，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了Vue3如何獲取來源路由問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07