Vue-router不允许导航到当前位置(/path)错误原因以及修复方式

目录
  • 报错提示
  • 错误原因
  • 错误演示
  • 解决方法
    • 方法一
    • 方法二
    • 方法三

报错提示

Navigating to current location ("/path") is not allowed

错误原因

控制台出现以上这种 Navigating to current location ("/path") is not allowed 时，是因为重复进入了相同路由。

错误演示

为了演示报错，用vue-cli重新构建了一个新的项目，只编写了一个按钮一个input。
code：

<!-- vue模板代码 -->
<div>
	<button @click="gotoHandle">测试路由跳转</button>
	<input v-model="routeName">
<div>

// 路由跳转代码
export default {
  data() {
    return {
      routeName: ''
    }
  },
  methods: {
    gotoHandle() {
      this.$router.push({name: this.routeName})
    }
  }
}

动图演示

在重复进入相同路由时（不论是通过路径，还是路由名称进入），会提示不允许导航到当前位置（path）， 就像上面的例子进入路由名为About的路由时，提示的是path: "/about"，Navigating to current location ("/about") is not allowed。这是因为跳转的方法错误时，未捕获错误处理，因此直接输出了错误信息。

解决方法

方法一

直接在跳转报错的那个地方加上.catch(error => error)

export default {
  data() {
    return {
      routeName: ''
    }
  },
  methods: {
    gotoHandle() {
      this.$router.push({name: this.routeName}).catch(error => error)
    }
  }
}

方法二

为跳转错误的方法全局加上错误捕获。

import VueRouter from 'vue-router'

const routerPush = VueRouter.prototype.push
VueRouter.prototype.push = function (location) {
  return routerPush.call(this, location).catch(error => error)
}

以上代码在main.js，或者router/index.js 下执行，以及new VueRouter之前之后都一样。因为是重置的VueRouter原型对象上的push事件，给原型对象的push事件添加上了捕获异常，所以会通过原型链改变所有相关对象。

replace 方法重复跳转错误与上方类似，把push改成replace就好。

方法三

此方法为建议方法，建议优化跳转逻辑，避免重复跳转相同路由。

到此这篇关于Vue-router不允许导航到当前位置(/path)错误原因以及修复方式的文章就介绍到这了,更多相关Vue-router 导航到当前位置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue-router中hash模式与history模式的区别详解

    Vue-router中hash模式与history模式的区别详解

    VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,这个题其实就是考验你的开发经验是否属实. 小白回答:hash模式url带#号,history模式不带#号. 大牛解答: 形式上:hash模式url里面永远带着#号,开发当中默认使用这个模式.如果用户考虑url的规范那么就需要使用history模式,因为history模式没有#号,是个正常的url,适合推广宣传: 功能上:比如我们在开发app的时候有分享页面,那么这个分享出去的页面就是用vue或是react做的,咱们把这个

  • vue-Router安装过程及原理详细

    vue-Router安装过程及原理详细

    目录 1.前端路由实现原理 2.vue-Router 基本使用 2.1.安装 2.2.配置路由 2.3.实例化 2.4.挂载路由 2.5.页面上添加 router-link 和 router-view 3.router 的模式 3.1.hash 模式 3.2.history 模式 4.router-link的属性 4.1.tag 属性 4.2.replace 属性 4.3.active-class 5.vue-Rrouter 页面跳转方式 5.1.router-link 实现 5.2.通过 js

  • vue3使用vue-router的完整步骤记录

    vue3使用vue-router的完整步骤记录

    前言 对于大多数单页应用程序而言,管理路由是一项必不可少的功能.随着新版本的Vue Router处于Alpha阶段,我们已经可以开始查看下一个版本的Vue中它是如何工作的. Vue3中的许多更改都会稍微改变我们访问插件和库的方式,其中包括Vue Router. 一.第一步:安装vue-router npm install vue-router@4.0.0-beta.13 二.第二步:main.js 先来对比一下vue2和vue3中main.js的区别:(第一张为vue2,第二张为vue3) 可以

  • vue-router定义元信息meta操作

    vue-router定义元信息meta操作

    router/index.js import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import Test from '../views/Test.vue' import NotFound from '../views/NotFound.vue' import TestChild from '../views/TestChild.vue' import AVie

  • vue-router中hash模式与history模式的区别

    vue-router中hash模式与history模式的区别

    vue-router有两种模式 hash模式 history模式 1.单页面应用 单页应用 1.只有一个html文件,整个网站的所有内容都在这一个html里,通过js来处理 2.不仅仅是在页面交互是无刷新的,连页面跳转都是无刷新的.为了实现单页应用 ==> 前后端分离 + 前端路由.(更新视图但不重新请求页面) 前端路由 实现起来其实也很简单,就是匹配不同的 url 路径,进行解析,加载不同的组件,然后动态的渲染出区域 html 内容. 优点 良好的交互体验,用户不需要刷新页面,页面显示流畅,

  • 详解Vue-Router的安装与使用

    目录 安装 路由的基础配置 将Router安装到Vue中 Router的相关配置 Router.routes 的相关配置 实现一个简单的路由 1.配置路由 2. 在组件中实现路由 1. router-link 用于实现路由的跳转组件:该组件支持的属性 2. router-view 根据当前VueRouter的配置,当路由路由路径发生改变时渲染对应的路由视图组件 安装 1.在已有Vue项目中手动安装vue-router npm install --save vue-router 2.使用vue-c

  • 一篇超详细的Vue-Router手把手教程

    目录 1,router-view 2,router-link 3,重定向redirect 4,路由别名 5,路由传参props 5.1,布尔模式 5.2,对象模式 5.3,函数模式 6,路由守卫 6.1,全局前置守卫beforeEach 6.2,全局解析守卫beforeResolve 6.3,全局后置钩子afterEach 6.4,路由独享守卫beforeEnter 6.5,组件内的守卫 6.6,完整的导航解析流程 7,路由元信息 8,过渡动效 9,滚动行为 10,完整路由配置 总结 最近在重温

  • 使用vue3.x+vite+element-ui+vue-router+vuex+axios搭建项目

    使用vue3.x+vite+element-ui+vue-router+vuex+axios搭建项目

    目录 一. 参考文档 二. vite搭建项目 三. 配置element-ui 四. 配置vue-router 五. 配置vuex 安装 六. 配置axios 七. 总结 一. 参考文档 vite官方文档 vue3.x官方文档 vue-router4.x官方文档 vuex4.x官方文档 element-ui3.x官方文档 Ant Design Vue2.x官方文档 axios文档 二. vite搭建项目 安装 # npm 安装 npm init vite@latest # yarn 安装 yarn

  • vue-router路由懒加载及实现的3种方式

    什么是路由懒加载? 也叫延迟加载,即在需要的时候进行加载,随用随载. 官方解释: 1:当打包构建应用时,JavaScript 包会变得非常大,影响页面加载. 2:如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 官方在说什么呢?为什么需要懒加载? 1:首先,我们知道路由中通常会定义很多不同的页面. 2:这个页面这项目build打包后,一般情况下,会放在一个单独的js文件中 3:但是,如果很多的页面都放在同一个js文件中,必然会造成这个页面

  • vue3.0+vue-router+element-plus初实践

    vue3.0+vue-router+element-plus初实践

    Vue3中文文档 Vue3.0对比Vue2.x优势 框架内部做了大量的性能优化,包括:虚拟dom,编译模板,Proxy的新数据监听,更小的打包文件等. 新增的组合式API(即Composition API),更适合大型项目的编写方式. 对TypeScript支持更好,去掉this操作,更强大的类型推导. 初始化项目 安装@vue/cli npm install @vue/cli -g 或 yarn global add @vue/cli 创建项目 vue create 项目名 可以选择Vue3的

  • 详解vue-router的导航钩子(导航守卫)

    在做vue项目的时候,要求用户在页面访问前先登录,或在离开页面前发出提醒.vue官方提供的路由管理器 vue-router 提供的导航钩子,通过跳转或取消的方式守卫导航.以下总结了路由钩子函数的使用方法和一些使用场景. 一.全局守卫 router.beforeEach 路由改变前的钩子 const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { ... ... }) 其中: to:将要访问的路径 fr

随机推荐