0

    vue中this.$router

    2023.04.11 | admin | 288次围观

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

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

    转机

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

    解决

    然后我就在子组件的导航栏中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;
                }
            })
        },
    

    版权声明

    本文仅代表作者观点。
    本文系作者授权发表,未经许可,不得转载。

    发表评论