routes() {/*獲取數據里面的控制業務端和營銷端的mode數值*/const property = Vue.ls.get(ACCESS_MODE);/*const *//* const showingMenu = staticRoutes.filter(item){return !item.hidden}*//*去除里面的不是item.hidden是隱藏的屬性*/const showingMenu = staticRoutes.filter(item => !item.hidden);/*拿出所有的菜單*/let menu = [];let pNames = new Set();/*for循環得出所需要的結構 打印出所有的結構*/for (const item of showingMenu) {console.log(showingMenu)/*如果沒有父親級別菜單 就開始繼續進行執行*/if (!item.meta.pName) {/*如果這個端是業務端 并且里面的name的數值不是沒有大菜單 比較多的*/if (property == 1 && (item.name == "Order" || item.name == "Content"||item.name=="Home"||item.name == "Task")){} else {/*否則就是業務端*/menu.push({path: item.path,name: item.name,icon: item.meta.icon,text: item.meta.text});}/*如果pnames有大菜單 */} else if (!pNames.has(item.meta.pName)) {/*就去除里面的pname*/const peers = showingMenu.filter(i => i.meta.pName === item.meta.pName).map(i => ({path: i.path,name: i.name,icon: i.meta.icon,text: i.meta.text}));if (property == 1 && (item.meta.pName == "結算管理" )||(item.meta.pName == "數據分析")){}else{menu.push({text: item.meta.pName,icon: iconMap[item.meta.pName],children: peers});pNames.add(item.meta.pName);}}}return menu;},

?statusRouter

/*各個路由模塊的建立*/ import Home from "@/views/Home/Home"; import GlobalLayout from "@/layout/GlobalLayout"; import Login from "@/views/login/Login"; const SYSTEM_MANAGEMENT = "系統管理"; const SETTLEMENT_MANAGEMENT = "結算管理"; const DATAANALYSIS_MANAGEMENT = "數據分析";/*定義路徑的數值 自定義路徑的值*/ export const LOGIN_PATH = "/login"; export const HOME_PATH = "/"; export const APP_PATH = "/HomeApp"; /*** 菜單配置** 參數例子：* {* path: 路徑,* name: 組件名稱,* meta: {* text: 左側菜單欄顯示文字,* icon: 左側菜單欄顯示圖標,* pName: 父級菜單名稱* },* hidden: 是否在菜單欄中隱藏,* component: 組件（按需引入）* }*/ /*進行路由設置處理*/ export const staticRoutes = [{path: HOME_PATH,name: "Home",meta: {text: "首頁",icon: "el-icon-tickets"},component: Home},{path: "/order",name: "Order",meta: {text: "訂單管理",icon: "el-icon-tickets"},component: () => import("@/views/order/Order")},{path: "/task",name: "Task",meta: {text: "任務管理",icon: "el-icon-tickets"},component: () => import("@/views/task/Task")},{path: "/content",name: "Content",meta: {text: "內容管理",icon: "el-icon-document-copy"},component: () => import("@/views/content/Content")},{path: "/settlement",name: "Settlement",meta: {text: "任務結算",icon: "el-icon-document-copy",pName: SETTLEMENT_MANAGEMENT},component: () => import("@/views/settlement/settlement/Settlement")},{path: "/transaction",name: "Transaction",meta: {text: "交易記錄",icon: "el-icon-document-copy",pName: SETTLEMENT_MANAGEMENT},component: () => import("@/views/settlement/transaction/Transaction")},{path: "/list",name: "list",meta: {text: "數據列表頁",icon: "el-icon-document-copy",pName: DATAANALYSIS_MANAGEMENT},component: () => import("@/views/Detaildata/DetailList/List")},{path: "/list/analysis/:id",name: "Analysis",meta: {text: "數據詳情頁",pName: "數據列表頁"},props: true,hidden: true,component: () => import("@/views/Detaildata/DetailEmpty/Empty")},{path: "/app",name: "app",meta: {text: "營銷端頁面",icon: "el-icon-document-copy",pName: DATAANALYSIS_MANAGEMENT},component: () => import("@/views/Detaildata/DetailApp/App")},{path: "/pc",name: "pc",meta: {text: "業務端頁面",icon: "el-icon-document-copy",pName: DATAANALYSIS_MANAGEMENT},component: () => import("@/views/Detaildata/DetailPc/Pc")},{path: "/user",name: "User",meta: {text: "用戶管理",icon: "el-icon-user",pName: SYSTEM_MANAGEMENT},component: () => import("@/views/system/user/UserList")},{path: "/department",name: "Department",meta: {text: "部門管理",icon: "el-icon-user",pName: SYSTEM_MANAGEMENT},component: () => import("@/views/system/department/Department.vue")},{path: "/account",name: "Account",meta: {text: "賬號管理",icon: "el-icon-user",pName: SYSTEM_MANAGEMENT},component: () => import("@/views/system/account/Account.vue")},{path: "/dictionary",name: "Dictionary",meta: {text: "數據字典",pName: SYSTEM_MANAGEMENT},component: () => import("@/views/system/dictionary/Dictionary")} ];/*** 一級路由*/ export const routes = [{path: "/",component: GlobalLayout,children: staticRoutes},// {// /*營銷端*/// path: APP_PATH,// component: GlobalApp,// children: staticRoutesApp// },{path: LOGIN_PATH,name: "Login",component: Login},{path: "/404",name: "404",hidden: true,component: () => import("@/views/404")},{path: "*",redirect: "/404",hidden: true} ];/*** 非路由菜單項圖標*/ export const iconMap = {[SYSTEM_MANAGEMENT]: "el-icon-setting",[SETTLEMENT_MANAGEMENT]: "el-icon-coin",[DATAANALYSIS_MANAGEMENT]: "el-icon-setting" };

?

總結

以上是生活随笔為你收集整理的工作129:动态路由的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。