路由用來管理不同頁面間關(guān)系和跳轉(zhuǎn)，我們可以自己配置，這種功能就是路由。路由的本質(zhì)是hash值，vue 中的路由設(shè)置分為四步曲：① 定義路由組件 ② 配置路由 ③ 實(shí)例化路由 ④ 掛載路由。

用 Vue.js + Vue Router 創(chuàng)建單頁應(yīng)用，是非常簡單的。使用 Vue.js ，我們已經(jīng)可以通過組合組件來組成應(yīng)用程序，當(dāng)你要把 Vue Router 添加進(jìn)來，我們需要做的是，將組件 (components) 映射到路由 (routes)，然后告訴 Vue Router 在哪里渲染它們。路由放在src->router->index.js中，頁面放在views文件夾。

4.png

• 路由配置項(xiàng)說明

//當(dāng)設(shè)置 true 的時(shí)候該路由不會再側(cè)邊欄出現(xiàn) 如401，login等頁面，或者如一些編輯頁面/edit/1
hidden: true // (默認(rèn) false)

//當(dāng)設(shè)置 noRedirect 的時(shí)候該路由在面包屑導(dǎo)航中不可被點(diǎn)擊
redirect: 'noRedirect'

//當(dāng)你一個(gè)路由下面的 children 聲明的路由大于1個(gè)時(shí)，自動會變成嵌套的模式--如組件頁面
//只有一個(gè)時(shí)，會將那個(gè)子路由當(dāng)做根路由顯示在側(cè)邊欄--如引導(dǎo)頁面
//若你想不管路由下面的 children 聲明的個(gè)數(shù)都顯示你的根路由
//你可以設(shè)置 alwaysShow: true，這樣它就會忽略之前定義的規(guī)則，一直顯示根路由
alwaysShow: true

name: 'router-name' //設(shè)定路由的名字，一定要填寫不然使用<keep-alive>時(shí)會出現(xiàn)各種問題
meta: {
  roles: ['admin', 'editor'] //設(shè)置該路由進(jìn)入的權(quán)限，支持多個(gè)權(quán)限疊加
  title: 'title' //設(shè)置該路由在側(cè)邊欄和面包屑中展示的名字
  icon: 'svg-name' //設(shè)置該路由的圖標(biāo)
  noCache: true //如果設(shè)置為true，則不會被 <keep-alive> 緩存(默認(rèn) false)
  breadcrumb: false // 如果設(shè)置為false，則不會在breadcrumb面包屑中顯示
}

• 我們只需在路由中對應(yīng)的位置加上自己的菜單選項(xiàng)

{
    path: '/example',
    component: Layout,
    redirect: '/example/list',
    name: 'Example',
    meta: {
      title: 'Example',
      icon: 'example'
    },
    children: [
      {
        path: 'create',
        component: () => import('@/views/example/create'),
        name: 'CreateArticle',
        meta: { title: 'Create Article', icon: 'edit' }
      },
      {
        path: 'edit/:id(\\d+)',
        component: () => import('@/views/example/edit'),
        name: 'EditArticle',
        meta: { title: 'Edit Article', noCache: true, activeMenu: '/example/list' },
        hidden: true
      },
      {
        path: 'list',
        component: () => import('@/views/example/list'),
        name: 'ArticleList',
        meta: { title: 'Article List', icon: 'list' }
      }
    ]
  },

• 這時(shí)就可以在菜單欄看到自己增加的菜單項(xiàng)

  
  
  增加菜單項(xiàng).png