二级路由菜单选中问题和面包屑问题

[StoneTiny]

Question （问题描述）
我有2个二级菜单, 人员列表, 人员详情, 其中人员详情配置了hidden: true, 我点击人员列表中的详情按钮, 跳转到了详情页, 但是人员列表菜单没有选中, 面包屑为: 首页/用户管理/人员列表

Describe the solution you'd like （你期待的是什么？）
希望点击详情页后人员列表菜单为选中状态, 面包屑为 首页/用户管理/人员列表/人员详情
我需要改动哪些文件来实现此功能, 谢谢!

我的理解是在 meta 里面加一项内容, 把两个路由菜单进行关联, 选中的时候进行判断, 就可以实现选中了, 但是具体修改哪些文件, 还请指教~

[sendya]

你这都是三级的菜单了。
人员列表 一个 router-view，然后把详情，编辑等页面作为子路由页面

[StoneTiny]

不想采用三级菜单,人员列表和详情页面信息比较多,想单独展示,我看个人页/个人设置是这种形式的.我已经解决掉这个问题了,在meta里面加了个属性.谢谢~

[Nicky213Zhang]

不想采用三级菜单,人员列表和详情页面信息比较多,想单独展示,我看个人页/个人设置是这种形式的.我已经解决掉这个问题了,在meta里面加了个属性.谢谢~

你好，你要实现的是列表跳详情(详情为隐藏路由)，并且满足面包屑样式，是吗？我也遇到这样的问题，要么是同级配置菜单(但是这样满足不了面包屑)，要么就是添加router-view在列表页。你说的参考个人设置，我也看过，没想明白怎么实现，还有你说的添加一个meta属性，请问是怎么实现的呢

[nuochong]

不想采用三级菜单,人员列表和详情页面信息比较多,想单独展示,我看个人页/个人设置是这种形式的.我已经解决掉这个问题了,在meta里面加了个属性.谢谢~

你好，你要实现的是列表跳详情(详情为隐藏路由)，并且满足面包屑样式，是吗？我也遇到这样的问题，要么是同级配置菜单(但是这样满足不了面包屑)，要么就是添加router-view在列表页。你说的参考个人设置，我也看过，没想明白怎么实现，还有你说的添加一个meta属性，请问是怎么实现的呢
@sendya
我也遇到这个问题，同求Q@Q

[John-Soul]

不想采用三级菜单,人员列表和详情页面信息比较多,想单独展示,我看个人页/个人设置是这种形式的.我已经解决掉这个问题了,在meta里面加了个属性.谢谢~

你好，你要实现的是列表跳详情(详情为隐藏路由)，并且满足面包屑样式，是吗？我也遇到这样的问题，要么是同级配置菜单(但是这样满足不了面包屑)，要么就是添加router-view在列表页。你说的参考个人设置，我也看过，没想明白怎么实现，还有你说的添加一个meta属性，请问是怎么实现的呢

我根据他的思路，重写了menu.js Breadcrumb.vue 以及增加了router.config.js相关路由内的meta。

具体思路是：
1、注意详情页的meta
{
path: '/operate/activity',
name: 'activity',
component: () => import('@/views/operate/activity/Index'),
meta: { title: '活动管理', keepAlive: true}
},
{
path: '/operate/activity/detail',
name: 'activity_detail',
hidden: true,
component: () => import('@/views/operate/activity/Detail'),
meta: { title: '活动详情', fatherMeta: { name: 'activity', path: '/operate/activity', meta: { title: '活动管理' } } }
}

2、在 menu.js L80增加判断，此步操作是为了选中详情页也能在左侧选中列表页（详情页和相应列表页的path要注意对应）
const { hidden, fatherMeta } = this.$route.meta
if (routes.length >= 3 && fatherMeta ) {
const path = routes.pop().path
const pathArray = path.split('/').slice(0, 3)
this.selectedKeys = [pathArray.join('/')]
} else if (routes.length >= 3 && hidden) {
this.selectedKeys = [routes.pop().path]
} else {
this.selectedKeys = [routes.pop().path]
}

3、在 BreadList.Vue L32 增加判断，目的是把父级导航渲染进面包屑列表中（注意与步骤1中的meta对应关系）
// 新增判断逻辑，如果有 fatherMate 则先 push 到 breadList 中
if (item.meta.fatherMeta) {
this.breadList.push(item.meta.fatherMeta)
}

祝你好运。

[StoneTiny]

1.meta增加了一个属性parentName

          {
            path: '/uac/module-list',
            name: 'ModuleList',
            component: () => import('@/views/uac/ModuleList'),
            meta: { title: '模块列表', icon: 'tool', keepAlive: true }
          },
          {
            path: '/uac/module-list/:id/permission-list',
            name: 'PermissionList',
            component: () => import('@/views/uac/PermissionList'),
            hidden: true,
            meta: { title: '权限列表', keepAlive: true, parentName: 'ModuleList' }
          }

2.增加一个方法，根据parentName查询父节点

src/components/_util/util.js
export function getRouterByName (name) {
  return recursiveRouteByName(store.getters.addRouters[0], name)
}

function recursiveRouteByName (router, name) {
  if (router && router.name && router.name === name) {
    return router
  } else if (router.children && router.children.length > 0) {
    for (let i = 0; i < router.children.length; i++) {
      const r = recursiveRouteByName(router.children[i], name)
      if (r) {
        return r
      }
    }
  }
  return false
}

3.修改面包屑

    src/components/tools/Breadcrumb.vue
    import { getRouterByName } from '../_util/util'
    getBreadcrumb () {
      this.breadList = []
      // this.breadList.push({name: 'index', path: '/dashboard/', meta: {title: '首页'}})
      this.name = this.$route.name
      this.$route.matched.forEach(item => {
        // item.name !== 'index' && this.breadList.push(item)
        const { parentName } = item.meta
        if (parentName) {
          const router = getRouterByName(parentName)
          if (router) {
            this.breadList.push(router)
          }
        }
        this.breadList.push(item)
      })
    }
  }

4.修改菜单

    crystal-vue/src/components/Menu/menu.js
    import { getRouterByName } from '../_util/util'
    updateMenu () {
      const routes = this.$route.matched.concat()
      const { hidden, parentName } = this.$route.meta
      if (routes.length >= 3 && hidden) {
        routes.pop()
        this.selectedKeys = [routes[routes.length - 1].path]
      } else {
        if (parentName) {
          const router = getRouterByName(parentName)
          if (router) {
            this.selectedKeys = [router['path']]
          }
        } else {
          this.selectedKeys = [routes.pop().path]
        }
      }
      const openKeys = []
      if (this.mode === 'inline') {
        routes.forEach(item => {
          openKeys.push(item.path)
        })
      }

      this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
    },

[nuochong]

5. 如果遇到多级嵌套的情况，需要对步骤3做如下修改

    src/components/tools/Breadcrumb.vue
    import { getRouterByName } from '../_util/util'
        getBreadcrumb() {
      this.breadList = []
      // this.breadList.push({name: 'index', path: '/dashboard/', meta: {title: '首页'}})
      this.name = this.$route.name
      this.$route.matched.forEach(item => {
        // item.name !== 'index' && this.breadList.push(item)
        this.getParentRouter.call(this, item)
        console.log('this.breadList', this.breadList)
      })
    },
    getParentRouter(item) {
      const { parentName } = item.meta
      if (parentName) {
        const router = getRouterByName(parentName)
        const { parentName: nextParentName } = router.meta
        if (typeof nextParentName !== 'undefined') {
          this.getParentRouter.call(this, router)
        } else if (router) {
          this.breadList.push(router)
        }
      }
      this.breadList.push(item)
    }

[chengshihard]

你这都是三级的菜单了。 人员列表 一个 router-view，然后把详情，编辑等页面作为子路由页面

求一个demo