vue的跳转路由改变导航的:default-active

1.导航部分

vue的跳转路由改变导航的:default-active_第1张图片
el-element的导航部分

在data里面定义activeIndex:"unitSelection"


2.路由部分

vue的跳转路由改变导航的:default-active_第2张图片
路由部分

3.导航点击回调事件


vue的跳转路由改变导航的:default-active_第3张图片
@select事件



4.路由改变时的导航对应高亮

vue的跳转路由改变导航的:default-active_第4张图片
路由改变取对应的index的值

此方法在mounted里执行


上述完成后会有一个问题:用户修改地址栏中的url,路由跳转实现但是activeIndex却还是跳转之前的导航

解决问题有两个方案

1.利用监听路由的watch方法

/*监听路由改变*/

watch:{

      "$route":"fetchData"

  }


vue的跳转路由改变导航的:default-active_第5张图片
执行此方法

在created的里面调用fetchData方法

2.利用vue的生命周期函数beforeUpdate

在此函数里面调用上述的changeNav的方法即可解决

推荐使用生命周期函数的方法,多用生命周期函数,你会发现很多惊喜的!!!~~

你可能感兴趣的:(vue的跳转路由改变导航的:default-active)