VUE-Element组件(二)NavMenu导航菜单--层级关系

VUE-Element组件(二)NavMenu导航菜单--层级关系,第1张

NavMenu第一篇的几个例子,固定的菜单中菜单层级是在只写死的,动态菜单权限中层级也是由后台代码排好的(父子关系),到前端接收的menuList可以直接循环渲染了。现在后端只传回有权限的菜单编码,层级关系放在前端路由配置,然后根据路由与后端返回的菜单编码过滤用户权限。

一、多级路由:之前的路由均为二级路由(当然也可以写成多级路由),如果需要配置多级路由,嵌套多层children就可以了,其次要注意component。最外层component指向导航页即NavMenu菜单页面,其他的父级路由component指向一个空的路由跳转页面(否则会出现多个菜单)。如三级菜单:

children:[
{
  path: '/my/user',
  name: 'myUser',
  meta: {
    title: '用户',
    noControl: true,
    icon: 'el-icon-help',
  },
  component: MultiLevelMenu,
  children: [
    {
      path: '/my/user1',
      name: 'user1',
      meta: {
        title: '用户1页面',
        noControl: true,
        showAlways: true
      },
      component: MultiLevelMenu,
      children: [
        {
          path: '/my/user1/user11',
          name: 'overview',
          meta: {
            title: '用户11

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1320269.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-11
下一篇 2022-06-11

发表评论

登录后才能评论

评论列表(0条)

保存