番禺人才網(wǎng)入庫考試,夫唯老師seo,電子商務(wù)網(wǎng)站建設(shè)與管理的實(shí)踐報(bào)告,軟文推廣是什么意思?#上一篇文章講述了三級路由緩存的一個(gè)ParentView這個(gè)方案#xff0c;它是可以實(shí)現(xiàn)三級路由緩存的問題#xff0c;但是經(jīng)過測試反饋#xff0c;發(fā)現(xiàn)有一個(gè)嚴(yán)重的bug#xff0c;就是打開的三級路由頁面有幾個(gè)#xff0c;新打開的三級路由頁面的onMounted或者onBeforeMount 就…#上一篇文章講述了三級路由緩存的一個(gè)ParentView這個(gè)方案它是可以實(shí)現(xiàn)三級路由緩存的問題但是經(jīng)過測試反饋發(fā)現(xiàn)有一個(gè)嚴(yán)重的bug就是打開的三級路由頁面有幾個(gè)新打開的三級路由頁面的onMounted或者onBeforeMount 就會觸發(fā)n1次 導(dǎo)致接口重復(fù)被調(diào)用#這就使我不得不再次研究如何更優(yōu)雅且沒有bug的來實(shí)現(xiàn)Vue三級及以上路由無法緩存的問題重新思考既然二級路由可以實(shí)現(xiàn)緩存那么可不可以把三級以及三級以上路由轉(zhuǎn)化為二級路由呢有的同學(xué)說路由本來就是三級的轉(zhuǎn)為二級菜單那里就不可以使用了那么有沒有一個(gè)方法既不影響頁面菜單那里的UI展示效果又能把三級路由轉(zhuǎn)為二級路由呢代碼實(shí)現(xiàn)這里需要注意路由配置還是保持多級嵌套的形式而這個(gè)配置并非最終注冊使用的路由僅僅是提供側(cè)邊欄導(dǎo)航菜單使用同時(shí)再生成一份用于動(dòng)態(tài)注冊路由的數(shù)據(jù)圖例如果沒看明白的話可以看下面兩組數(shù)據(jù)。一、處理后端返回的菜單數(shù)據(jù)(原始數(shù)據(jù)還是原始數(shù)據(jù)的處理方式)import { RouteRecordRaw } from vue-router; import { defineStore } from pinia; import { constantRoutes } from /router; import { store } from /store; const modules import.meta.glob(../../views/**/**.vue); const Layout () import(/layout/index.vue); const Other () import(/layout/other.vue); const filterAsyncRoutes (routes: [],basepath:string) { const asyncRoutes: RouteRecordRaw[] []; routes.sort((item1, item2) { return item1.sort - item2.sort }).forEach((route) { const tmpRoute { // path: basepath/route.menuUrl, // component: basepath / route.menuUrl, // name: route.menuName, // meta: { title: route.menuName, icon: route.icon, show: false, keepAlive: true }, path: basepath / route.resourceUrl, component: basepath / route.resourceUrl, name: route.resourceName, meta: { title: route.resourceName, type: route.resourceType, icon: route.icon, show: route.isShow, keepAlive: true, sort: route.sort }, children: route.childrenList.length 0 ? route.childrenList : [] }; // ES6擴(kuò)展運(yùn)算符復(fù)制新對象 //解析路徑(舊的邏輯) if (tmpRoute.component?.toString() Layout) { tmpRoute.component Layout; } else { const component modules[../../views${tmpRoute.component}.vue]; if (component) { tmpRoute.component component; } else { if(tmpRoute.children.length 0){ tmpRoute.component Other }else { tmpRoute.component modules[../../views/error-page/404.vue]; } } } if (tmpRoute.children tmpRoute.children.length 0) { tmpRoute.children filterAsyncRoutes(tmpRoute.children.sort((item1, item2) { return item1.sort - item2.sort // if (item1.sort item2.sort) { // return 1; // } else { // return -1; // } }), basepath / route.resourceUrl); // basepath / route.menuUrl } asyncRoutes.push(tmpRoute); }); return asyncRoutes; }; // setup export const usePermissionStore defineStore(permission, () { //當(dāng)前模塊的id const menuid refstring() //當(dāng)前路徑 const currpath refstring() // state const routes refRouteRecordRaw[]([]); // actions function setRoutes(newRoutes: RouteRecordRaw[]) { routes.value constantRoutes.concat(newRoutes); } function setMenuid(id: string) { menuid.value id } function setCurrPath(path: string) { currpath.value path; } /** * 生成動(dòng)態(tài)路由 * * param childrenList 用戶的菜單集合 * returns */ function generateRoutes(childrenList: []) { //構(gòu)成菜單樹形結(jié)構(gòu) //1.第一級 默認(rèn)為 頭部 //2.第二級 為功能菜單 //拼轉(zhuǎn)成前端數(shù)據(jù) const asyncRoutes: RouteRecordRaw[] []; childrenList.sort((item1, item2) { // if (item1.sort item2.sort) { // return 1; // } else { // return -1; // } return item1.sort - item2.sort }).map((model) { //模塊 const tmp { path: model.url, component: Layout, redirect: model.url, name: model.moduleName, meta: { title: model.moduleName, id: model.id, icon: model.icon, show: true, keepAlive: true }, // children: model.accessibleMenuList.length 0 ? model.accessibleMenuList : [] children: model.childrenList.length 0 ? model.childrenList : [] } if (tmp.children tmp.children.length 0) { tmp.children filterAsyncRoutes(tmp.children, model.url); } asyncRoutes.push(tmp); }); //設(shè)置當(dāng)前模塊 // console.log(當(dāng)前路徑的數(shù)據(jù), asyncRoutes) return new PromiseRouteRecordRaw[]((resolve, reject) { setRoutes(asyncRoutes); resolve(asyncRoutes); }); } return { routes, menuid, currpath, setRoutes, generateRoutes, setMenuid, setCurrPath }; }); // 非setup export function usePermissionStoreHook() { return usePermissionStore(store); }二、在注冊動(dòng)態(tài)路(router.addRoute)由之前處理路由數(shù)據(jù)/** * 將三級路由扁平化為二級路由 * param {Array} routes - 原始的三級路由樹 * returns {Array} - 扁平化后的路由數(shù)組 */ function flattenThreeLevelRoutes(routes: any[]) { const result []; for (const level1Route of routes) { // 保留一級路由的基本信息 const flatLevel1Route { ...level1Route, children: [] }; if (level1Route.children level1Route.children.length 0) { for (const level2Route of level1Route.children) { // 處理二級路由的children三級路由 if (level2Route.children level2Route.children.length 0) { // 將三級路由提升為二級路由 for (const level3Route of level2Route.children) { // console.log(三級路由,level3Route) flatLevel1Route.children.push({ ...level3Route }); } } else { // 二級路由沒有children直接保留 flatLevel1Route.children.push(level2Route); } } } result.push(flatLevel1Route); } return result; } const { accessibleModuleList } await userStore.getInfo(); //下傳前端的菜單權(quán)限等數(shù)據(jù) const accessRoutes await permissionStore.generateRoutes(accessibleModuleList); console.log(原始路由數(shù)據(jù), accessRoutes); // 關(guān)鍵步驟將三級路由扁平化為二級 const flatRoutes flattenThreeLevelRoutes(accessRoutes); console.log(扁平化后的路由數(shù)據(jù), flatRoutes); flatRoutes.forEach((route) { router.addRoute(route); });通過上面的關(guān)鍵步驟我的項(xiàng)目已經(jīng)可以實(shí)現(xiàn)三級路由緩存的效果了三、面包屑導(dǎo)航問題處理我的項(xiàng)目中去掉了面包屑導(dǎo)航這個(gè)雞肋的功能原有的面包屑導(dǎo)航是通過$route.matched可以獲取到嵌套路由每一層級的信息而當(dāng)路由被處理成兩級后也就無法通過$route.matched進(jìn)行顯示了所以在處理路由數(shù)據(jù)的同時(shí)也需要處理面包屑導(dǎo)航的信息。大致最終會處理成這樣{ path: /users, meta: { title: 用戶管理 }, children: [ { path: clients/list, meta: { title: 客戶列表, breadCrumb: [ { path: /users, title: 用戶管理 }, { path: clients, title: 客戶管理 }, { path: list, title: 客戶列表 } ] } }, { path: clients/detail, meta: { title: 客戶詳情, breadCrumb: [ { path: /users, title: 用戶管理 }, { path: clients, title: 客戶管理 }, { path: detail, title: 客戶詳情 } ] } } ] }這樣一來通過$route.meta.breadcrumb也就可以獲取任意某個(gè)路由的完整面包屑導(dǎo)航信息了。