美文网首页
vue的跳转路由改变导航的:default-active

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

作者: bin_fa4c | 来源:发表于2018-08-01 14:19 被阅读0次

    1.导航部分

    el-element的导航部分

    在data里面定义activeIndex:"unitSelection"


    2.路由部分

    路由部分

    3.导航点击回调事件

    @select事件

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

    路由改变取对应的index的值

    此方法在mounted里执行


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

    解决问题有两个方案

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

    /*监听路由改变*/

    watch:{

          "$route":"fetchData"

      }

    执行此方法

    在created的里面调用fetchData方法

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

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

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

    相关文章

      网友评论

          本文标题:vue的跳转路由改变导航的:default-active

          本文链接:https://www.haomeiwen.com/subject/vrslvftx.html