项目场景：

vue＋elementui+node ，个人博客开发踩坑记录…

---

问题描述：

1. element-ui ，页面被$router.push(“xxx”)跳转后导航菜单高亮无变化

<el-menu@select="handleSelect":default-active= "activePath"background-color="#F0F2F1"text-color="#000"active-text-color="#0683B1":collapse="isCollapse":collapse-transition="false"router>
/el-menu>

---

原因分析：

1.element-ui ，页面被$router.push(“xxx”)跳转后导航菜单高亮无变化

default-active只是在初始化会取设定的值，只改这个是没用的，不会触发内部子组件的重新渲染，触发select事件才会让内部子组件重新渲染，比如一般写vue组件是把props传递给组件内部的data，再对内部data做操作。

---

解决方案：

1.element-ui ，页面被$router.push(“xxx”)跳转后导航菜单高亮无变化

对路由进行监听，让内部子组件重新渲染，实现导航菜单正确高亮变化。

 methods: {handleSelect (index) {this.activePath = index}watch: {// 监听路由变化  解决左侧导航栏activePath不实时更新问题$route (to, from) {//由于to.path.name获取到的路径带有'/'，截取后再进行正确的导航栏activePath赋值。this.handleSelect(to.path.substring(1)) }}