Vue Router路由无法跳转问题汇总

更新时间：2023年09月12日 15:45:48 作者：Dongle74

这篇文章主要介绍了Vue Router路由无法跳转问题汇总,在这里我整理了部分Vue Router路由无法跳转问题,结合实例代码给大家介绍的非常详细,需要的朋友可以参考下

问题集

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

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

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

<!-- App.vue -->
<template>
  <div id="app">
    <router-view/> <!--顶层路由视图-->
  </div>
</template>

父组件

子层路由视图，只能子路由配置可以使用，比如 /parent 路由中的children子路由配置 child

换句话说：子路由可以跳转则必需对应父路由的组件中村啊在 <router-view/>

<!-- Parent.vue -->
<template>
  <div id="parent">
    Parent Content
    <router-view/> <!--关键点：子层路由视图-->
  </div>
</template>

子组件

<!-- Child.vue -->
<template>
  <div id="child">
      Child Content
  </div>
</template>

路由配置

一级路由只能用在在顶层路由视图，如 name=Home,Parent 等路由只能用在 App.vue 中的 <router-view/>

子路由只能用在父组件中的 <router-view/> 中，如 name=Child 路由只能用在 Parent.vue 中的 <router-view/>
如果Child组件中仍有 <router-view/> ，并且需要使用,
- 则可以在 name=Child 路由中继续配置 children 子路由
- 或者配置新的和’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组件中仍有<router-view/>，则可以继续配置子路由
        },
      ],
    },
    {
      path: '/new-child',
      name: 'NewChild',
      component: Child,
    //   children: [] // 如果Child组件中仍有<router-view/>，则可以继续配置子路由
    },
  ],
})

子路由路径问题

子路由路径以 / 开头代表全路径配置，需要包含父路由路径,如 path:'/parent/child'
子路由可省略 / 开头，自动继承父路由路径，如 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,
        },
      ],
    },
  ],
})

路由重复问题

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

当准备跳转的路由是当前路由是，即假如当前路由时 /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 (<anonymous>)
    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)

解决方法：

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

捕获异常并忽略

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

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

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

判断路径是否为当前路径

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

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

到此这篇关于Vue Router路由无法跳转问题汇总的文章就介绍到这了,更多相关Vue Router路由无法跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue在IIS服务器部署后路由无法跳转

解决VUE3 keep-alive页面切换报错parentComponent.ctx.deactivate
这篇文章主要介绍了解决VUE3 keep-alive页面切换报错parentComponent.ctx.deactivate is not a function的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue实现短信验证码登录功能（流程详解）
无论是移动端还是pc端登录或者注册界面都会见到手机验证码登录这个功能，输入手机号，得到验证码，这篇文章主要介绍了基于vue实现短信验证码登录功能,需要的朋友可以参考下
2019-12-12
vue2从template到render模板编译入口详解
这篇文章主要为大家介绍了vue2从template到render模板编译入口详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
vue3项目打包成apk(android)详细图文教程
Vue本身是一个构建用户界面的渐进式框架,不能直接打包成APK文件,但是你可以使用工具将Vue应用打包成一个可以在Android设备上安装的APK文件,这篇文章主要给大家介绍了关于vue3项目打包成apk(android)的相关资料,需要的朋友可以参考下
2024-05-05
vue项目中请求数据特别多导致页面卡死的解决
这篇文章主要介绍了vue项目中请求数据特别多导致页面卡死的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Vue强制组件重新渲染的方法讨论
这篇文章给大家详细介绍了Vue强制组件重新渲染的正确方法,非常的实用,有需要的小伙伴可以参考下
2020-02-02
Pinia介绍及工作原理解析
这篇文章主要为大家介绍了Pinia介绍及工作原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
vue3实现图片缩放拖拽功能的示例代码
v3-drag-zoom 是基于 vue3 开发的一个缩放拖拽组件,方便开发者快速实现缩放拖拽功能,效果类似地图的缩放与拖拽,本文给大家介绍了vue3如何快速实现图片缩放拖拽功能,感兴趣的朋友可以参考下
2024-04-04
vue-cli axios请求方式及跨域处理问题
这篇文章主要介绍了vue-cli axios请求方式及跨域处理问题,文中还给大家提到了vue中axios解决跨域问题和拦截器使用，非常不错，具有参考借鉴价值，需要的朋友参考下吧
2018-03-03
vue背景图片路径问题及解决
这篇文章主要介绍了vue背景图片路径问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07