最終效果圖：

?詳細步驟：

1. 找到src → router → 新建文件 名為modules → 在modules下新建文件test.js,如圖1。

?

2. 在test.js中配置路由,內容如下：

import Layout from '@/layout'

const test={

????path: '/test',

????component: Layout,

????redirect: '/test/index', //重定向地址，在面包屑中點擊會重定向去的地址

????hidden: false, // 不在側邊欄顯示,如401，login等頁面，或者一些編輯頁面

????alwaysShow: true, //一直顯示根路由

????meta: {

?????????roles: ['admin','editor'], ?//你可以在根路由設置權限，這樣它下面所有的子路由都繼承了這個權限

?????????title:"測試",

?????????icon:'table',? ?// 圖標

?????????noCache:true,? // 如果設置為 true則不會被<keep-alive>緩存 (默認為false)

?????????Breadcrumb:false,? //如果設置為false，則不會在breadcrumb面包屑中顯示（默認true）

?????????affix:true? //如果設置為true，它則會固定在tag-view中 （默認 false）

????????},

????children: [{

??????path: 'test1',

??????component: ()=>import('@/views/test/test1'),

??????name: 'test1', //

??????meta: {

????????title: 'test1',

????????roles: ['admin','editor'],? //或者你可以給每一個子路由設置自己的權限

????????noCache: true??

??????}

????},

????{

????????path: 'test2',

????????component: ()=>import('@/views/test/test2'),

????????name: 'test2', //

????????meta: {

??????????title: 'test2',

??????????roles: ['admin','editor']

????????}

??????}]

}

export default test

3. 在src → route，中打開index.js引入test配置的路由，如圖三所示。

?

4. 在views中新建test文件夾，在新建index,test1,test2頁面,如圖三所示。

5. 可參考網址：路由和側邊欄 | vue-element-admin

?

總結

以上是生活随笔為你收集整理的基于vue框架添加侧边栏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。