vue中this.$router.push()跳转导致页面刷新导航栏active不改变问题解决~！

前言

写vue项目中遇到了导航栏绑定的active不改变，路由正常跳转了结果导航栏显示还是第一个。

于是我就开始排错，发现每次路由跳转，导航栏绑定的activeNum都被刷新掉归0了，也就是显示第一个。刚开始确实好久没发现问题，以前也是这么写的没出过问题。

转机

后来我想是不是因为，这个导航栏是在router-view跳转的子组件中的原因，页面跳转的时候将整个子组件都刷新了，表面上看是子组件中的子组件刷新（相当于孙子级别的组件刷新），其实跳转的时候是刷新的整个子组件。

解决

然后我就在子组件的导航栏中created下加了方法，每次刷新完了的话调用超热created中的方法获取路由，然后再拿获取到的路由去和导航栏对应的路由进行比对，获取到对应的索引再给activeNum赋值！就这样成功的解决啦！！！

总结

在路由跳转的时候如果是如果有多个层级的路由，那么出了第一个层级路由的父组件不会刷新以外，其他层级的路由都会将整个子组件刷新。如果想解决的话也可以尝试用keep-alive解决问题（ps：我没试过）

放一下解决的代码

created() {
        this.navBarItem.forEach((item,index) => {
            //检测当前路由路径  然后跳转到对应的item
            if(decodeURI(this.$route.path).search(item.path) != -1) {
                this.activeNum = index;
            }
        })
    },