基于vue框架添加侧边栏

最终效果图：

 详细步骤：

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