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

偏执的太偏执、 2024-03-16 20:11 7阅读 0赞

**目录**

报错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)

![503ffe248a4f4a13848f1ea95b66763a.png][]

## 解决方法：重置路由 ##

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);
        },
      },
    };

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

[503ffe248a4f4a13848f1ea95b66763a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/f4c3dd8666ef4c36b3e42b58444497a4.png