2021/10/29
檔案（路徑）：router.map.js 專案根目錄/src/router/async/router.map.js
Login.vue 專案根目錄/src/pages/login/Login.vue
此處僅為測試。
請複製一下程式碼到router.map.js：

// 檢視元件
const view = {
tabs: () => import('@/layouts/tabs'),
blank: () => import('@/layouts/BlankView'),
page: () => import('@/layouts/PageView')
}

 
// 路由元件註冊

const routerMap = {
login: {
authority: '*',
path: '/login',
component: () => import('@/pages/login')
},

root: {
path: '/',
name: '登入',
redirect: '/login',
component: view.tabs
},

devAdmin: {
path: '/devAdmin',
name: '選單名',
redirect: '/devAdmin',
component: view.page
},

developer: {
path: '/devAdmin/developer',
component: () 
 
=> import("@/pages/devAdmin/developer"),
},

permisGroup: {
path: '/devAdmin/permisGroup',
component: () => import("@/pages/devAdmin/permisGroup"),
},

}
export default routerMap

解釋：在登入介面會有獲取路由的入口，我在入口前面定義了我要模仿後臺傳到前臺的路由陣列資料，資料格式如下：

let data = [
{
router: "root",
children: [
//root 路由的子路由配置
{
router: "home",
path: "/home", //
 
 url路徑
children: [],
name: "首頁",
icon: "user",
component: () => import("@/pages/home"),
},
{
router: "mune",
path: "/mune",
name: "選單名1",
icon: "menu",
children: [
{
router: "mune",
path: "/mune/muner",
name: "選單名2",
icon: "form",
component: () => import("@/pages/mune/muner"),
},
{
router: "permily",
path: "/opener/permily",
name: "選單名2",
icon: "form",
component: () => import("@/pages/opener/permily"),
},
],
},
];

loadRoutes(data);
this.$router.push("/home");

你可能有點糊塗，但這個不是給你看的，是給我自己看的，這不是一篇適用於大眾的教程，而是我記憶的一把鑰匙。
注意：asyncRoutes要設定為true，在setting.config.js裡面。
注意！：後臺傳過來的路由的一級導航要在router.map.js的routerMap數組裡面。