vue 在一个页面跳转到另外一个页面,选中的导航没有变解决方案
效果:即在配置页面跳到管理页后,没有选中管理,还是跳转前的选中状态解决思路:1.定位:路由和默认选中菜单的监听问题2.方案:去菜单组件中,通过监听路由变化,改变选中值具体代码实现:<el-aside :class="navBarWidth"><el-menu@select="handleSelect":default-active="defaultActive"class="el
·
效果:即在配置页面跳到管理页后,没有选中管理,还是跳转前的选中状态
解决思路:
1.定位:路由和默认选中菜单的监听问题
2.方案:去菜单组件中,通过监听路由变化,改变选中值
具体代码实现:
<el-aside :class="navBarWidth">
<el-menu
@select="handleSelect"
:default-active="defaultActive"
class="el-menu-vertical-demo"
background-color="#03152b"
text-color="#fff"
active-text-color="#fff"
router
:collapse="isCollapse"
>
<!-- :default-openeds="[1,2,3,4,5,6]" -->
<!-- :default-openeds="[menuList[1].path,menuList[2].path,menuList[4].path,menuList[5].path,menuList[6].path]" -->
<!-- el-menu属性-始终保持一个展开 unique-opened -->
<div v-for="(item, index) in menuList" :key="item.path">
<el-submenu :index="'' + index" v-if="item.children">
<template slot="title">
<img :src="item.icon" alt="" />
<span slot="title">{{ item.title }}</span>
</template>
<div v-for="i in item.children" :key="i.path">
<el-submenu :index="i.path" v-if="i.children">
<template slot="title">
<img :src="i.icon" alt style="margin:0 3px" width="18px" />
<span slot="title">{{ i.title }}</span>
</template>
<el-menu-item
v-for="v in i.children"
:key="v.path"
:index="v.path"
>
<img :src="v.icon" alt style="margin:0 3px" width="18px" />
<span slot="title">{{ v.title }}</span>
</el-menu-item>
</el-submenu>
<el-menu-item :index="i.path" :key="i.path" v-else>
<img :src="i.icon" alt style="margin:0 3px" width="18px" />
<span slot="title">{{ i.title }}</span>
</el-menu-item>
</div>
</el-submenu>
<el-menu-item :index="item.path" v-else>
<img
v-if="item.moduleIcon"
:src="item.moduleIcon"
alt
width="14px"
/>
<span slot="title" style="margin:0 3px">{{ item.title }}</span>
</el-menu-item>
</div>
</el-menu>
</el-aside>
computed: {
defaultActive: function() {
return this.$route.path; //监听路由,控制菜单选择
}
},
mounted() {
// console.log(this.menuList, this.$route);
},
methods: {
handleSelect(index, indexPath) {
this.defaultActive = index;
}
}
欢迎关注公众号:【抓住重点】,获取更多编程周边技能,与博主一起进步
更多推荐
已为社区贡献3条内容
所有评论(0)