07 动态菜单栏

1 左侧菜单栏静态数据改为动态数据

1 后台数据

2 遍历展示菜单

原静态菜单代码

        
          
          
            
            
            选项1
          
        

遍历一级菜单

 看下效果

一级菜单已出现，下来遍历二级菜单

看下效果

 接下来对菜单属性进行设置，参考官网

 设置路由跳转

左侧菜单栏完整代码如下：

 
      
        
        
          
          
            
            
            
                
                {{secondMenu.title}}
              
          
        
      

在router.js中配置用户管理的路由，页面路由全部挂载在index路由下，这样容易替换主体区的内容

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', name: 'Login', component: () => import('../views/Login.vue') },
    {
      path: '/index', 
      name: 'Index', 
      component: () => import('../views/Index.vue'), 
      children: [
        { path: '/sys/user', name: 'SysUser', component: () => import('../views/sys/user/User.vue') }
      ]
    },
  ]
})

主题区使用router-view标签显示路由的页面内容

  

 点击用户管理，效果如下

接下来，配置角色管理页面，菜单管理页面及路由

 至此，点击菜单切换页面内容初步实现