原文地址:http://www.cnblogs.com/C-dashazi/p/10111425.html
路由配置
{
path: '/finance',
name: 'Finance',
meta: {
title: '财务'
},
component: () =>
import('@/components/Finance'),
redirect: '/finance/code/code',
children: [{
path: '/finance/code',
name: 'financeindex',
meta: {
title: '税收配置'
},
redirect: '/finance/code/code',
component: () =>
import('@/components/finance/financeindex'),
children: [{
path: '/finance/code/code',
name: 'FinanceCode',
hidden: false,
active:'/finance/code', //这里是在左侧菜单显示并且需要选中的
meta: {
title: '税收编码(金税)'
},
component: () =>
import('@/components/finance/code/Code'),
},
{
path: '/finance/code/codeimportrecord', // 这个路由进入的界面是 税收编码(金税)的二级页面, 当进入这个页面的时候,需要菜单中的税收编码(金税)显示选中
name: 'FinanceCodeImportRecord',
hidden: true,
meta: {
title: '税收编码导入记录'
},
component: () =>
import('@/components/finance/code/CodeImportRecord'),
},
{
path: '/finance/classcode/classcode',
name: 'FinanceClassCode',
hidden: false,
active:'/finance/classcode', //为了省事,只给需要在左侧显示的路由添加active属性
meta: {
title: '分类税收编码确认'
},
component: () =>
import('@/components/finance/classCode/ClassCode'),
},
]
}, ]
element
:default-active=this.show // 这是的值是指与 el-menu-item中:index的值对应的那一天显示选中(正常情况就是一个页面一个路由,进入那个路由,对应的导航菜单需要选中)
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#282b33"
text-color="#bcbcbc"
active-text-color="#ffffff">
{{nav.meta.title}}