vue-router切换路由时，当重复进入同一个路由且传递的参数不同时页面无法响应的问题

• 步骤一： 配置动态路由，避免出现Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/ques/1".重复切换同一个路由的bug。
  配置动态路由-官方链接由此进入

（1）使用路由时传递一个特定参数

//test.vue页面
//由于我的ques是一个不确定的对象，所以使用额外参数随机数randomCode
 this.$router.replace({name: "SingleChoice", params: {ques: ques, randomCode: getRandomCode()}})

当然这里的randomCode参数可以随意制定

        var getRandomCode = function(){
            var d = new Date();
            return d.getTime();
        }

（2）在配置路由的文件中添加动态路径参数（:开头）

// router/index.js页面
    {
        path: '/ques/1/:randomCode',
        name: 'SingleChoice',
        component: () => import('../components/SingleChoice.vue')
    },

之后通过再进入同一个页面, 页面路径也会发生变化

image.png

image.png

这样通过this.$router重复进相同页面时就可以不报错，并且能够监听到路由的变化

• 步骤二： 监听路由的变化，从而重新渲染页面

//test.vue页面
  watch: {
    $route (to, from) {
        //这样就可以获取到变化的参数了，然后执行参数变化后相应的逻辑就行了
        console.log(to);
        this.question = to.params.ques;
    }
  },