vue实现elementUI的左侧导航栏,右侧动态调用路由并解决导航栏高亮问题
原因:没有高亮是因为没有激活导航栏的item1、首先注册需要跳转的router{path: "/home",name: "Home",component: Home,children: [{path: '/index',component: () => import('../co
·
原因:没有高亮是因为没有激活导航栏的item
1、首先注册需要跳转的router
{
path: "/home",
name: "Home",
component: Home,
children: [
{
path: '/index',
component: () => import('../components/main/Index.vue')
},
{
path: '/week',
component: () => import('../components/meetingOrder/week.vue')
},
{
path: '/quick',
component: () => import('../components/meetingOrder/quick.vue')
},
{
path: '/day',
component: () => import('../components/meetingOrder/day.vue')
}
]
},
2、使用导航栏的default-active属性,默认为第一个打开的router,之后在需要每个item中使用index="/path",path为路由的地址。一定要加上“/”
<el-menu
default-active="1"
class="el-menu-vertical-demo"
unique-opened
menu-trigger="hover"
background-color="#545c64"
text-color="#fff"
active-text-color="orange"
:collapse="isCollapse"
:collapse-transition="false"
:default-active="activePath"
router>
<el-menu-item index="/index">
<i class="el-icon-menu"></i>
<span>主页</span>
</el-menu-item>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-location"></i>
<span>会议预约</span>
</template>
<el-menu-item index="/quick" >快速预定</el-menu-item>
<el-menu-item index="/day" >日历预定</el-menu-item>
<el-menu-item index="/week" >周历预定</el-menu-item>
</el-submenu>
3、在主体部分使用router-view
<!--内容区-->
<el-main>
<router-view></router-view>
</el-main>
4、大功告成!
更多推荐
已为社区贡献4条内容
所有评论(0)