vue切换菜单时不需要页面刷新_vue element-ui 刷新页面后导航菜单不高亮问题

问题详情：

在使用element-ui的NavMenu组件作为导航菜单的时候，我是通过遍历router/index.js里的路由json数组(已定义成常量)来作为NavMenu的渲染数据的。但是我发现刷新页面之后NavMenu就失去了高亮。

尝试解决：

初步Google搜索之后发现原来NavMenu组件有这么一个参数配置用来管理当前激活的菜单：default-active 说明：当前激活菜单的 index 类型：String (—摘自官方文档)

我们可以直接配置它指向当前的路由路径，给NavMenu配置如下：:default-active="$route.path"

配置完后我们点击导航，刷新……耶，保持高亮了！

然后你以为就完事大吉了？NoNoNo >

如果你的路由里还有子路由的话，你就会发现子路由里刷新后导航菜单居然没有高亮。​ 例如，导航菜单里点击课程列表，(此时刷新页面能正常高亮)，然后在课程列表里点击管理课程，跳转到子路由管理课程页面)，这时再刷新页面，导航菜单就不高亮了。

分析原因：检查切换导航时路由路径的变化

先查看每次切换和刷新路由时$route参数的变化，在导航菜单组件里监视一下$route，代码如下：//代码放在导航菜单组件所在的页面里

watch: {

$route: function(to, from) {

console.log(this.$route);

<