- 步骤一： 配置动态路由，避免出现
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;
}
},
