记录Vue第二次点击按钮，跳转报错

目录

报错Uncaught runtime errors:

解决方法：重置路由

报错Uncaught runtime errors:

ERROR Avoided redundant navigation to current location: "/c/p1". NavigationDuplicated: Avoided redundant navigation to current location: "/c/p1". at createRouterError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1711:15) at createNavigationDuplicatedError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1699:15) at HashHistory.confirmTransition (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1961:18) at HashHistory.transitionTo (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1897:8) at HashHistory.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2272:10) at eval (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2528:24) at new Promise (<anonymous>) at VueRouter.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2527:12) at VueComponent.jump (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/example14/ContainerView.vue?vue&type=script&lang=js&:11:20) at click (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/example14/ContainerView.vue?vue&type=template&id=31bf51fa&scoped=true&:21:20)

解决方法：重置路由

1.在你设置跳转的js文件中添加充值路由代码，这里我的是example14.js。解释一下：该函数的实现通过创建一个新的 VueRouter 实例，并使用传入的路由配置重新设置 matcher。这将覆盖原有的路由配置，从而实现路由的重置效果。

//重置路由
export function resetRouter(){
  router.matcher = new VueRouter({routes}).matcher
}

2.引入

import {resetRouter} from '@/router/example14'//导入
console.log("111111");
const options = {
  methods: {
    jump(url) {
      resetRouter();     //引用
      this.$router.push(url);
    },
  },
};

最后测试成功，二次点击不报错。