【Vue】Router路由无法跳转问题整理

问题集

整理了部分Vue Router路由无法跳转问题：

1. 顶层router-view只能被顶层路由配置内容使用：此问题异常表现在路由跳转但页面不变
2. 子路由跳转必需父路由对应的组件中存在router-view：此问题异常表现在路由跳转但页面不变
   1. 子路由配置路径会自动继承父路径并自动增加/
   2. 如果子路径配置路径存在前缀/，则代表为全路径，需要包含父路由路径
3. 跳转路由与当前路由相同时,即重复路由时，会触发NavigationDuplicated错误

顶层路由视图只能顶层配置使用

<template>
  <div id="app">
    <router-view/> 
  div>
template>
1
2
3
4
5
6

父组件

子层路由视图，只能子路由配置可以使用，比如/parent路由中的children子路由配置child
换句话说：子路由可以跳转则必需对应父路由的组件中村啊在

<template>
  <div id="parent">
    Parent Content
    <router-view/> 
  div>
template>
1
2
3
4
5
6
7

子组件

<template>
  <div id="child">
      Child Content
  div>
template>
1
2
3
4
5
6

路由配置

1. 一级路由只能用在在顶层路由视图，如name=Home,Parent等路由只能用在App.vue中的
2. 子路由只能用在父组件中的中，如name=Child路由只能用在Parent.vue中的
3. 如果Child组件中仍有，并且需要使用,
   1. 则可以在name=Child路由中继续配置children子路由
   2. 或者配置新的和’name=Parent’同级别的路由配置依赖Child.vue组件，如name=NewChild,并在其中配置children子路由

// router配置
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      redirect:'/parent', // 可以使用App.vue中的顶层路由视图
    },
    {
      path: '/parent',
      name: 'Parent',
      component: Parent,
      children: [
        {
          path: 'child', // 非全路径配置时，子路径开头无需`/`,只需子路径`child`
          // path : '/parent/child', // 也可以配置全路径
          name: 'Child',
          component: Child,
        //   children: [] // 如果Child组件中仍有，则可以继续配置子路由
        },
      ],
    },
    {
      path: '/new-child',
      name: 'NewChild',
      component: Child,
    //   children: [] // 如果Child组件中仍有，则可以继续配置子路由
    },
  ],
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

子路由路径问题

1. 子路由路径以/开头代表全路径配置，需要包含父路由路径,如path:'/parent/child'
2. 子路由可省略/开头，自动继承父路由路径，如path:'child'
   上面也有代码说明也有介绍

// router配置
export default new Router({
  routes: [
    {
      path: '/parent',
      name: 'Parent',
      component: Parent,
      children: [
        {
          path: 'child', // 非全路径配置时，子路径开头无需`/`,只需子路径`child`
          // path : '/parent/child', // 也可以配置全路径
          name: 'Child',
          component: Child,
        },
      ],
    },
  ],
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

路由重复问题

vue-router 不知道哪个版本开始的问题，小编没关心过这个，解决内容可以参考.
1

当准备跳转的路由是当前路由是，即假如当前路由时/parent,仍旧执行this.$router.push('/parent')就会报类似以下错误：

NavigationDuplicated: Avoided redundant navigation to current location: "/data-manage".
    at createRouterError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2053:15)
    at createNavigationDuplicatedError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2023:15)
    at HTML5History.confirmTransition (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2340:18)
    at HTML5History.transitionTo (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2267:8)
    at HTML5History.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2613:10)
    at eval (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:3043:24)
    at new Promise ()
    at VueRouter.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:3042:12)
    at VueComponent.goto (webpack-internal:///./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/commons/layout/SideBar.vue:24:26)
    at click (webpack-internal:///./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-3cb2454e","hasScoped":false,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/commons/layout/SideBar.vue:17:30)
1
2
3
4
5
6
7
8
9
10
11

解决方法：

1. 重写vue-router的push方法
2. 捕获异常并忽略：当然也需要自己定义一个统一的push方法用来替换使用this.$router.push
3. 自记录当前路径和要跳转的路径，如果当前路径和要跳转的路径相同，则不跳转

重写push方法

在router/index.js(在自己项目的路由配置中哈，不要非要较真~)重写VueRouter.push方法

import VueRouter from 'vue-router'
const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(to) {
    return VueRouterPush.call(this, to).catch(err => err)
}
1
2
3
4
5

捕获异常并忽略

this.$router.push(url).catch(() => {})
1

推荐提取为统一公共方法，如：

export const routerPush = (url) => {this.$router.push(url).catch(() => {})}
1

判断路径是否为当前路径

如果路径非当前路径才允许跳转，否则不跳转，同样推荐提取为统一公共方法

// currentUrl存储在内存中
if (this.$route.path !== currentUrl) {
    this.$router.push({ path: currentUrl })
  }
1
2
3
4