Vue页面跳转但是导航高亮不会改变

Vue页面跳转但是导航高亮不会改变

问题：
在页面上点击时，高亮会变但是在后天用代码的话就不会变。

this.$router.push({name: "write"});

用这段代码高亮不会改变。

原因：
因为没有改变导航栏的 default-active （当前激活菜单的 index）。因为你用代码进行了改变，但是没有改变default-active的值。所以高亮不会改变。

解决：
每次变换路径时，进行刷新default-active。用监听器监听。

• 定义一个数据
  

• 定义函数handleSelect

handleSelect(keyPath) {this.defaultActive = keyPath;
}

• 监听你要变换的路径。

  $route() {this.handleSelect(this.$route.path);}

this.$route.path就是获取当前你跳转的路径。每当你的页面进行跳转时都会进入这个方法去刷新这个default-active,所以高亮就会改变了。搞定