<template>
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
router>
<el-menu-item v-for="( item, index ) in navList" :key="index" :index="item.name">
{{ item.navItem }}
</el-menu-item>
/el-menu>
</template>
<script>
xport default {
name: "NavView",
data() {
return {
activeIndex: '/index',
navList: [
{ name: '/index', navItem: '首页' },
{ name: '/jotter', navItem: '笔记本' },
{ name: '/library', navItem: '图书馆' },
{ name: '/admin', navItem: '个人中心' }
]
};
},
mounted() {
this.activeIndex = sessionStorage.getItem('keyPath') || '/index';
},
watch: {
activeIndex(newValue){
if(newValur != this.$route.path){
this.activeIndex = this.$route.path;
}
}
}
methods: {
handleSelect(keyPath) {
sessionStorage.setItem('keyPath', keyPath);
}
}
</script>
<style lang="scss" scoped>
</style>
- handleSelect函数官网示例给出的是2个参数key和keyPath,分别打印出来后是一样的都是当前的路径。保留一个就可以,然后把路径放在sessionStorage中。
- 在vue生命周期mounted函数中把这个当前路径赋值给 activeIndex 即赋值给了 default-active 参数。第一次访问的时候sessionStorage是空的,所以要加入默认的路径。
- 点击链接是可以完美做到刷新后会保持选中状态,但是当我们手动输入路由的时候,页面会跳转但是css样式不会改变。所有加上watch监听属性来监听activeIndex。当输入的路由和当前的路由不一样的时候。把当前的路由赋值给activeIndex。