Vue 跳转相同路由不同参数，解决页面数据不自动刷新

• vue-router 是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。
• 传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是应该是路径之间的切换，也就是组件的切换
• 因此，如果需要跳转相同路由不同参数时，必须确保组件需要重新被渲染

 Duang，最近搭建了一个自己的博客小破站，欢迎各位小伙伴来访吖：

ares-coder-blog-portalhttps://www.ares-stack.cn/blog_service/#/game

其中的一种方法：

复用组件时，想对路由参数的变化作出响应的话，可以 watch（监测变化） $route 对象

场景：

        created() {
            this.initData();
            /** 初始化其他 */
            let pId= this.$route.params.pId;
            if(pId){
                this.initOther(pId);
            }
        },
        watch: {
            //监听相同路由下参数变化的时候，从而实现异步刷新
            '$route'(to,from) {
                //做一些路由变化的响应
                //打开加载动画
                this.loading = true;
                //重新获取数据
                this.initData();
                /** 初始化其他数据 */
                let pid= this.$route.params.pid;
                if(pid){
                    this.initOther(pid);
                }
            },
        },

如果引入了子组件，子组件中也需要使用 watch 监测变化 $route 对象

        created() {
            this.initData();
        },
        watch: {
            //监听相同路由下参数变化的时候，从而实现异步刷新
            '$route'(to,from){
                this.initData();
            },
        },

---

参考来源于：

https://www.cnblogs.com/ainyi/p/9340311.html