Vue Element Admin 新增側邊欄

1. 在 /src/views/ 下新增需要的頁面

2. 配置路由器 router 中的路由表 routes，分為 constantRoutes 和 asyncRoutes。

將路由的配置資訊新增進路由表，如果希望有許可權，則放入 asyncRoutes；如果希望無許可權，則放入 constantRoutes。

官網的路由配置說明：

// 當設定 true 的時候該路由不會在側邊欄出現 如401，login等頁面，或者如一些編輯頁面/edit/1
hidden: true // (預設 false)

//當設定 noRedirect 的時候該路由在麵包屑導航中不可被點選
redirect: 'noRedirect'

// 當你一個路由下面的 children 宣告的路由大於1個時，自動會變成巢狀的模式--如元件頁面
// 只有一個時，會將那個子路由當做根路由顯示在側邊欄--如引導頁面
// 若你想不管路由下面的 children 宣告的個數都顯示你的根路由
// 你可以設定 alwaysShow: true，這樣它就會忽略之前定義的規則，一直顯示根路由
alwaysShow: true

name: 'router-name' // 設定路由的名字，一定要填寫不然使用<keep-alive>時會出現各種問題
meta: {
  roles: ['admin', 'editor'] // 設定該路由進入的許可權，支援多個許可權疊加
  title: 'title' // 設定該路由在側邊欄和麵包屑中展示的名字
  icon: 'svg-name' // 設定該路由的圖示，支援 svg-class，也支援 el-icon-x element-ui 的 icon
  noCache: true // 如果設定為true，則不會被 <keep-alive> 快取(預設 false)
  breadcrumb: false //  如果設定為false，則不會在breadcrumb麵包屑中顯示(預設 true)
  affix: true // 若果設定為true，它則會固定在tags-view中(預設 false)

  // 當路由設定了該屬性，則會高亮相對應的側邊欄。
  // 這在某些場景非常有用，比如：一個文章的列表頁路由為：/article/list
  // 點選文章進入文章詳情頁，這時候路由為/article/1，但你想在側邊欄高亮文章列表的路由，就可以進行如下設定
  activeMenu: '/article/list'
}

 2.1. 配置沒有子選單的選單

以下是一個簡單配置

{
  path: '/guide',
  component: Layout,
  redirect: '/guide/index',
  children: [
    {
      path: 'index',
      component: () => import('@/views/guide/index'),
      name: 'Guide',
      meta: { title: 'Guide', icon: 'guide', noCache: true }
    }
  ]
},

★ 需要改的地方

path: 根據自己的選單定義<path>

redirect: 改成 /<path>/index

children>component: 根據自己的元件匯入

children>name: 與 Component 的 name 保持一致

children>meta>title: 顯示在選單欄上的文字，自定義

children>meta>icon: 顯示在選單欄上的圖示，根據 /src/icons/svg/ 目錄下尋找，名字需保持一致