vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue Router路由无法跳转

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

作者：Dongle74

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

问题集

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

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

<!-- 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配置
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/>，则可以继续配置子路由
    },
  ],
})

子路由路径问题

// 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)

解决方法：

在 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路由无法跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文