第Vue3+Vite實現(xiàn)動態(tài)路由的詳細實例代碼項目基本目錄

1.首先定義初始默認的路由routes(router.js文件),vue文件使用import引入可以按需加載

import{

createRouter,

createWebHashHistory

}from"vue-router";

importstorefrom'../store/index.js'

constroutes=[{

path:"/login",

component:()=import("../view/Login/index.vue"),

children:[],

meta:{

title:'登錄頁',

hideMenu:true,//加入hideMenu屬性，不展示在側(cè)邊欄

name:"Login",

path:"/",

component:()=import("../view/Home/index.vue"),

meta:{

keepalive:true,

title:"主頁",

name:'Home',

//hideMenu:true,//不展示在側(cè)邊欄

children:[],

redirect:'/index'

]

2.在store的login.js模塊寫入調(diào)用后端數(shù)據(jù)的函數(shù)(寫在vuex的action對象中,方便全局異步調(diào)用)

Vuex允許我們將store分割成模塊（module）,比如登錄模塊,項目各個業(yè)務(wù)不相關(guān)的模塊。每個模塊擁有自己的state、mutation、action、getter、甚至是嵌套子模塊(具體可以看主頁另一篇博客)

3.執(zhí)行addRoutes函數(shù)獲取動態(tài)路由(在router.js文件,點擊登錄成功后,在全局路由守衛(wèi)去判斷是否登錄成功,再調(diào)用addRoutes函數(shù))

(1)全局路由守衛(wèi)邏輯具體可看注釋,好處是進入項目之后,刷新頁面路由守衛(wèi)會攔截跳轉(zhuǎn),可以重新執(zhí)行addRoutes()獲取路由,先獲取動態(tài)路由,再執(zhí)行跳轉(zhuǎn),不然頁面會報本地路由找不到(一個小坑)

(代碼如下)

router.beforeEach(async(to,from,next)={//路由守衛(wèi)

if(store.state.login.token){//存在token

if(to.path=='/login'){//存在token,如果想跳轉(zhuǎn)到登錄頁,默認有token跳轉(zhuǎn)進項目首頁

next({

path:'/'

}else{

//如果存在token,跳轉(zhuǎn)進項目頁面,則判斷當(dāng)前后端返回的路由有無長度

//或者有無即將跳轉(zhuǎn)路由的name

if(store.getters['login/getRoutes'].length||!=null){

next()//有的話直接跳轉(zhuǎn)

}else{//不滿足條件的話,重新請求后端動態(tài)路由數(shù)據(jù)

awaitaddRoutes();//addRoutes()必須加入await!!!!等待邏輯執(zhí)行完畢獲取路由

//如果addRoute未完成，路由守衛(wèi)會一層一層的執(zhí)行執(zhí)行,不加next()可能導(dǎo)致卡死!

//直到addRoute完成，找到對應(yīng)的路由

next({

...to,

replace:true

}else{

if(to.path=='/login'){

next()

}else{

next('/login')

})

后端返回的格式

(2)(重點在這,前面的步驟都可以不是重點)Vite使用import.meta.glob動態(tài)導(dǎo)入view文件夾所有前端頁面,并調(diào)用addRoutes()函數(shù)執(zhí)行獲取動態(tài)路由數(shù)據(jù)并做處理(代碼如下),主要作用是替換掉后端返回的component格式,再addRoute進路由表(看不懂的可以看代碼注釋或者可以搬進自己的項目打印看看每一步獲取的數(shù)據(jù))

letasyncRoutes=[]//定義數(shù)組接收后端返回的路由

constrouteAllPathToCompMap=import.meta.glob(`../view/**/*.vue`);

//**為通配符,vite不支持require導(dǎo)入方式,故用import.meta.glob(vite動態(tài)導(dǎo)入)

/*import.meta.glob

*該方法匹配到的文件默認是懶加載，通過動態(tài)導(dǎo)入實現(xiàn)，構(gòu)建時會分離獨立的chunk，是異步導(dǎo)入，返回的是Promise

*/*import.meta.globEager

*該方法是直接導(dǎo)入所有模塊，并且是同步導(dǎo)入，返回結(jié)果直接通過for...in循環(huán)就可以操作

asyncfunctionaddRoutes(){

awaitstore.dispatch('login/getNewRoutes').then((res)={//獲取后端返回的動態(tài)路由

if(res.datares.data.length){

//lethomeRouteChildren=[];

asyncRoutes=res.data;

*1。拿到處理完畢home的children，最終替換掉原來的children，給菜單渲染提供支持

*2.通過遞歸,調(diào)用router.addRoute,把每一項route插到對應(yīng)的父route下

//服務(wù)端配置了路由，但前端還沒添加對應(yīng)文件的路由列表，內(nèi)容是路由的component值(服務(wù)端的)

//constunForList=['']

consthomeChildren=routes[1].children;

constdfs=(parentRouteName='Home',asyncRoutes=[],originRouteChildren=[])={

if(!Array.isArray(asyncRoutes))return[];

asyncRoutes.forEach(route={

//if(unForList.includes(ponent))return;

/**后端返回來的路由component是字符串,如component:"view/Index/index.vue",

*前端需要把component:"view/Index/index.vue"轉(zhuǎn)化為組件對象

*component:()=import("/src/view/Index/index.vue")

ponent=routeAllPathToCompMap[`../${ponent}`];

//ponent=()=import(`../${ponent}`);

constrouteChildren=route.children;

router.addRoute(parentRouteName,route);

route.children=dfs(,routeChildren)

originRouteChildren.push(rout