1.前言
记录一次跳转路由时,导航栏选中消失的神秘事件。
2.事情原图
请看这张图,一开始路由跳转到这页面时,导航栏是有高亮的,但是在刷新的时候,高亮就消失了;
总所周知,客户是一种可以从鸡蛋里面挑出骨头的神秘生物。
3.代码
页面代码
{{ item.title }}
逻辑代码
props: { collapsed: { type: Boolean, default: false }, menuList: { type: Array, default: () => [] } }, methods: { handleSelect(name) { this.$router.push({ name: `${name}` }); } }
上述代码是我封装到公共组件的导航栏代码,主要是判断是否有多级菜单(这不是我们重点)。
4.解答
遇到问题就要解决,不懂的情况下,只好上网找答案了,但是网络上的答案五花八门,看的你眼花缭乱。
最后还是靠自己摸索了
首先我的路由给需要跳转的页面都会加上name值,当然也有些页面不需要name值,跳转的方式是this.$router.push();iview官网有提供一个参数,active-name,这个就好像css里面的active,可以选中指定的菜单在封装的组件页面这里要用到mounted生命周期,在页面渲染后得到导航栏的name值,网上说还要用updated这个生命周期,其实不需要;点击跳转的时候,跳到与路由name值相同的页面
详细代码:
//template
// XXXX //script data() { return { isShow: "test-group" }; }, props: { collapsed: { type: Boolean, default: false }, menuList: { type: Array, default: () => [] } }, mounted() { this.isShow = this.$route.name; }, methods: { handleSelect(name) { this.isShow = name; this.$router.push({ name: `${name}` }); } }
这样就可以解决上述的问题了,其中有些地方说不清的地方请见谅,只是记录自己开发时粗心的一面,菜鸟一枚,不喜勿喷!