简单来说,$route.match包含从上到下的所有路由对象 (副本)。
一个例子:
路由配置:重点是meta标签
{
path: '/livingData/personalTable',
name: 'personalTable',
component: RouteView,
meta: { title: 'sideMenu.livingData.equipmentData', keepAlive: true, hidden: false, permission: ['table'] },
redirect: '/livingData/personalTable/list',
hideChildrenInMenu: false,
children: [
{
path: '/livingData/personalTable/list',
name: 'personalTable',
hideChildrenInMenu: true, //true => 在侧边菜单中隐藏子路由,即不显示下拉菜单
component: () => import('@/pages/basicDataCol/lifeRecord/personalTable'),
meta: { title: 'sideMenu.livingData.equipmentTable', keepAlive: true, hidden: false, permission: ['table'] },
children: [
{
path: '/livingData/personalTable/detail',
name: 'personInfo',
component: () => import('@/pages/basicDataCol/lifeRecord/personalInfo'),
hidden: true, //不显示在侧边菜单中,与上面的配合使用
meta: { title: 'sideMenu.livingData.detail', keepAlive: true, hidden: true, permission: ['table'] }
},
]
},
}
menu.js中菜单选择判断的函数
updateMenu () {
const routes = this.$route.matched.concat() //此处$route.matched
console.log('routes =>',routes) //结果为 routes => (3) [{…}, {…}, {…}]
console.log('meta.name =>',this.$route.meta.title) //结果为 meta.name => sideMenu.livingData.detail
console.log('meta.hidden =>',this.$route.meta.hidden) //结果为 meta.hidden => true
//这三条信息可以看到,this.$route.matched包含了三层路由,目前的this.$route是最里面一层的路由
if (this.$route.meta.hidden) { //如果当前路由的meta中hidden设为true
routes.pop() //就把这一层路由去掉
//console.log('lengthFP =>',routes.length) //结果为 lengthFP => 2
this.selectedKeys = [routes.pop().path] //选中上面pop完毕后的最后一层
console.log('finish pop selectedKeys =>', this.selectedKeys)
//结果为 finish pop selectedKeys => ["/livingData/personalTable/list", __ob__: Observer]
} else {
console.log(routes.pop())
this.selectedKeys = [routes.pop().path] //如果meta中hidden设为false,就表示不‘隐藏’,直接选择最后一层路由即可
console.log('no pop selectedKeys =>', this.selectedKeys)
}
const openKeys = []
if (this.mode === 'inline') {
routes.forEach(item => {
openKeys.push(item.path)
})
}
this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
},