vue跳转同一路由报错的问题及解决

下面是关于“vue跳转同一路由报错的问题及解决”的完整攻略。

一、问题现象

在Vue开发中，经常会遇到多个块之间跳转的场景。当你在路由表中定义好相应的路由，并且跳转到相同路由时，可能会出现以下两种报错信息：

1. 如果是使用router.push进行路由跳转，报错信息如下：

Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/"

1. 如果是在模板中使用<router-link>跳转，报错信息如下：

Error: Avoided redundant navigation to current location: "/"

以上错误信息提示的主要意思是，跳转的目标路由与当前路由相同，因此是重复的。

二、问题原因

其主要原因是因为Vue实例中的路由机制有所变化。在Vue2.x版本中，如果在当前路由上使用router.push函数或是<router-link>跳转到相同路由，则会出现这种错误。因为由于改变的是hash值，而非url地址，因此即使你改变了hash值，浏览器并不会出现网页重新加载的情况。

三、问题解决

解决方法一：手动捕获重复跳转信息

可以通过在路由守卫中进行手动处理来解决：

1. 在Vue项目中创建一个文件夹router，并在其中，创建一个名为index.js的文件；
2. 在index.js文件中引入Vue及Vue Router：

import Vue from 'vue';
import Router from 'vue-router';

1. 在index.js文件中，使用Vue.use()方法将Router注入Vue实例中，并定义router对象：

Vue.use(Router);

const router = new Router({
    mode: 'history',
    routes: [
        // your routes here
    ]
});

1. 为router定义路由守卫：

router.beforeEach((to, from, next) => {
  if (to.path === from.path) {
    next(false);
  } else {
    next();
  }
});

上述代码中beforeEach方法是定义在vue-router中的路由导航守卫，当路由跳转时会自动调用。其中，to参数表示即将要进入的路由对象，from表示要离开的路由对象，next()是一个必须调用的方法，它会决定路由守卫的执行流程。如果传入了false参数，则中断当前导航；否则，进入下一个导航。因此，对于手动捕获重复跳转信息来说，通过判断当前路由与即将要进入的路由是否相同，若相同，则传入参数false，即停止路由跳转；否则进行下一个导航。

解决方法二：通过更新Vue Router

将当前项目中的Vue Router升级到3.x版本即可解决这个问题。

要进行Vue Router的升级，你可以进行以下操作：

1. 在你的Vue项目中，打开控制台并输入：npm view vue-router versions，查看最新的Vue Router版本。
2. 然后，执行以下命令安装最新版本的Vue Router：

npm install vue-router@^3.0.1 --save

1. 在你的main.js文件中，将引用Vue Router的代码修改为以下形式：

```js
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
// your routes config here
});

new Vue({
router: router,
// your app bootstrap here
}).$mount('#app');
```

总之，只要升级Vue Router到3.x版本及以上，就能避免在同一路由间跳转时出现的一系列错误。

四、示例说明

以路由重定向为例，示例如下：

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'Home',
    component: Home,
  }
];

做了上述配置之后，当你访问路由根目录时，它会自动重定向到/home路由页面，如果你访问两次根路由，如下所示，就会报错。

this.$router.push('/');
this.$router.push('/');

解决方案一（手动捕获重复跳转信息）：

router.beforeEach((to, from, next) => {
  if (to.path === from.path) {
    next(false);
  } else {
    next();
  }
});

解决方案二（升级Vue Router版本）：

1. 运行npm view vue-router versions命令查看最新的Vue Router版本；
2. 运行npm install vue-router@^3.0.1 --save命令将Vue Router升级到最新版本；
3. 在main.js中引用Vue Router：

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')