基于vue框架添加侧边栏
最終效果圖：
?詳細步驟：
1. 找到src → router → 新建文件 名為modules → 在modules下新建文件test.js,如圖1。
?
2. 在test.js中配置路由,內(nèi)容如下：
import Layout from '@/layout'
const test={
????path: '/test',
????component: Layout,
????redirect: '/test/index', //重定向地址，在面包屑中點擊會重定向去的地址
????hidden: false, // 不在側(cè)邊欄顯示,如401，login等頁面，或者一些編輯頁面
????alwaysShow: true, //一直顯示根路由
????meta: {
?????????roles: ['admin','editor'], ?//你可以在根路由設(shè)置權(quán)限，這樣它下面所有的子路由都繼承了這個權(quán)限
?????????title:"測試",
?????????icon:'table',? ?// 圖標
?????????noCache:true,? // 如果設(shè)置為 true則不會被<keep-alive>緩存 (默認為false)
?????????Breadcrumb:false,? //如果設(shè)置為false，則不會在breadcrumb面包屑中顯示（默認true）
?????????affix:true? //如果設(shè)置為true，它則會固定在tag-view中 （默認 false）
????????},
????children: [{
??????path: 'test1',
??????component: ()=>import('@/views/test/test1'),
??????name: 'test1', //
??????meta: {
????????title: 'test1',
????????roles: ['admin','editor'],? //或者你可以給每一個子路由設(shè)置自己的權(quán)限
????????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. 可參考網(wǎng)址：路由和側(cè)邊欄 | vue-element-admin
?
總結(jié)
以上是生活随笔為你收集整理的基于vue框架添加侧边栏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 8.裸板--C语言下的寄存器的读写置位清
- 下一篇： echarts+vue实现中国地图