vue 學習記錄 - 路由操做

路由/菜單說明

配置文件路徑

@/config/router.config.js

格式和說明

/**
 * 路由配置說明：
 * 建議：sider menu 請不要超過三級菜單，若超過三級菜單，則應該設計爲頂部主菜單 配合左側次級菜單
 *
 **/
 {
  redirect: noredirect,
  name: 'router-name',
  hidden: true,
  meta: {
    title: 'title',
    icon: 'a-icon',
    keepAlive: true,
    hiddenHeaderContent: true,
  }
}

{ Route } 對象

參數	說明	類型	默認值
hidden	控制路由是否顯示在 sidebar	boolean	false
redirect	重定向地址, 訪問這個路由時,自定進行重定向	string	-
name	路由名稱, 必須設置,且不能重名	string	-
meta	路由元信息（路由附帶擴展信息）	object	{}
hideChildrenInMenu	強制菜單顯示爲Item而不是SubItem(配合 meta.hidden)	boolean	-

{ Meta } 路由元信息對象

參數	說明	類型	默認值
title	路由標題, 用於顯示麪包屑, 頁面標題 *推薦設置	string	-
icon	路由在 menu 上顯示的圖標	[string,svg]	-
keepAlive	緩存該路由	boolean	false
hidden	配合hideChildrenInMenu使用，用於隱藏菜單時，提供遞歸到父菜單顯示 選中菜單項_（可參考 我的頁 配置方式）_	boolean	false
hiddenHeaderContent	*特殊 隱藏 PageHeader 組件中的頁面帶的 麪包屑和頁面標題欄	boolean	false
permission	與項目提供的權限攔截匹配的權限，若是不匹配，則會被禁止訪問該路由頁面	array	[]

路由自定義 Icon 請引入自定義 svg Icon 文件，而後傳遞給路由的 meta.icon 參數便可

路由例子

const asyncRouterMap = [
  {
    path: '/',
    name: 'index',
    component: BasicLayout,
    meta: { title: '首頁' },
    redirect: '/dashboard/analysis',
    children: [
      {
        path: '/dashboard',
        component: RouteView,
        name: 'dashboard',
        redirect: '/dashboard/workplace',
        meta: {title: '儀表盤', icon: 'dashboard', permission: ['dashboard']},
        children: [
          {
            path: '/dashboard/analysis',
            name: 'Analysis',
            component: () => import('@/views/dashboard/Analysis'),
            meta: {title: '分析頁', permission: ['dashboard']}
          },
          {
            path: '/dashboard/monitor',
            name: 'Monitor',
            hidden: true,
            component: () => import('@/views/dashboard/Monitor'),
            meta: {title: '監控頁', permission: ['dashboard']}
          },
          {
            path: '/dashboard/workplace',
            name: 'Workplace',
            component: () => import('@/views/dashboard/Workplace'),
            meta: {title: '工做臺', permission: ['dashboard']}
          }
        ]
      },

      // result
      {
        path: '/result',
        name: 'result',
        component: PageView,
        redirect: '/result/success',
        meta: { title: '結果頁', icon: 'check-circle-o', permission: [ 'result' ] },
        children: [
          {
            path: '/result/success',
            name: 'ResultSuccess',
            component: () => import(/* webpackChunkName: "result" */ '@/views/result/Success'),
            // 該頁面隱藏麪包屑和頁面標題欄
            meta: { title: '成功', hiddenHeaderContent: true, permission: [ 'result' ] }
          },
          {
            path: '/result/fail',
            name: 'ResultFail',
            component: () => import(/* webpackChunkName: "result" */ '@/views/result/Error'),
            // 該頁面隱藏麪包屑和頁面標題欄
            meta: { title: '失敗', hiddenHeaderContent: true, permission: [ 'result' ] }
          }
        ]
      },
      ...
    ]
  },
]

1. 請注意 component: () => import('..') 方式引入路由的頁面組件爲 懶加載模式。具體能夠看 Vue 官方文檔
2. 增長新的路由應該增長在 '/' (index) 路由的 children 內
3. 子路由的父級路由必須有 router-view 才能讓子路由渲染出來，請仔細查閱 vue-router 文檔
4. permission 能夠進行自定義修改，只須要對這個模塊進行自定義修改便可 src/store/modules/permission.js#L10

附權限路由結構：

第二種前端路由由後端動態生成的設計，能夠前往官網文檔 https://pro.loacg.com/docs/authority-management 參考