若nav選單是由後端api提供，且是多層級的選單（以2層級為例）：

可以將路由表分成4層
第1層：
Login，登入前頁面
Dashboard，登入後頁面，nav的選單放入它路由表物件的children裡
NotFound，404防錯頁面

第2層：
nav選單的父層（資料列表、系統設定），
路由表物件上不寫component，
如果使用者url網址輸入這層，應幫它重新導向，至登入後的預設頁面

第3層：
nav選單的子層（訂單、客戶）
路由表物件上不寫component
寫redirect，預設會導向子層第4層的首頁
即第4層path: ""的物件

第4層：
有渲染畫面的component，
寫meta指向它的父層第3層資訊

範例程式碼：

const routes = [
  // 第1層
  {
    path: "/",
    name: "Dashboard",
    component: () => import("@/pages/Dashboard.vue"),
    children: [
      // 第2層
      // 資料列表Menu
      {
        path: "datalist",
        name: "Datalist",
        children: [
          // 第3層
          // 訂單Menu
          {
            path: "order",
            name: "Order",
            redirect: { name: "OrderOverView" },
            children: [
              // 第4層
              // 總覽Component
              {
                path: "",
                name: "OrderOverView",
                meta: { parentName: "Order" },
                component: () => import("@/pages/datalist/order/index.vue"),
              },
              // 新增Component
              {
                path: "add",
                name: "OrderAdd",
                meta: { parentName: "Order" },
                component: () => import("@/pages/datalist/order/OrderAdd.vue"),
              },
              // 編輯Component
              {
                path: "edit/:id",
                name: "OrderEdit",
                meta: { parentName: "Order" },
                component: () => import("@/pages/datalist/order/OrderEdit.vue"),
              },
              // ...
            ],
          },
          // 客戶Menu
          {
            path: "client",
            name: "Client",
            redirect: { name: "ClientOverView" },
            children: [
              // 總覽Component
              {
                path: "",
                name: "ClientOverView",
                meta: { parentName: "Client" },
                component: () => import("@/pages/datalist/client/index.vue"),
              },
            ],
          },
        ],
      },
      // 系統設定Menu
      {
        path: "system",
        name: "System",
        redirect: { name: "SystemOverView" },
        children: [
          {
            path: "",
            name: "SystemOverView",
            meta: { parentName: "System" },
            component: () => import("@/pages/system/index.vue"),
          },
        ],
      },
    ],
  },
  {
    path: "/login",
    name: "Login",
    component: () => import("@/pages/login.vue"),
  },
  {
    path: "/notFound",
    name: "NotFound",
    component: () => import("@/pages/NotFound.vue"),
  },
  {
    path: "/:pathMatch(.*)*",
    redirect: "/notFound",
  },
];