点击按钮vue路由的页面跳不过来

Question

点击这个按钮应该跳到添加的页面

这是按钮

这是路由

点第一遍这个按钮的时候控制台什么也没有,再点一次就出现异常了

vue-router.esm.js?8c4f:2085 Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated", message: "Navigating to current location ("/addMember") is not allowed", stack: "Error↵    at new NavigationDuplicated (webpack-int…node_modules/vue/dist/vue.runtime.esm.js:2178:14)"}_name: "NavigationDuplicated"name: "NavigationDuplicated"message: "Navigating to current location ("/addMember") is not allowed"stack: "Error↵    at new NavigationDuplicated (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2009:14)↵    at HTML5History.confirmTransition (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2125:18)↵    at HTML5History.transitionTo (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2069:8)↵    at HTML5History.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2400:10)↵    at eval (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2812:22)↵    at new Promise (<anonymous>)↵    at VueRouter.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2811:12)↵    at VueComponent.addMember (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/main/accountBookModule/item/operationMember.vue?vue&type=script&lang=js&:13:20)↵    at invokeWithErrorHandling (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1853:26)↵    at VueComponent.invoker (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2178:14)"__proto__: Error
eval @ vue-router.esm.js?8c4f:2085
abort @ vue-router.esm.js?8c4f:2116
confirmTransition @ vue-router.esm.js?8c4f:2124
transitionTo @ vue-router.esm.js?8c4f:2068
push @ vue-router.esm.js?8c4f:2399
eval @ vue-router.esm.js?8c4f:2811
push @ vue-router.esm.js?8c4f:2810
addMember @ operationMember.vue?5b0b:13
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
Vue.$emit @ vue.runtime.esm.js?2b0e:3888
handleClick @ element-ui.common.js?5c96:9412
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6917

最后在网上找的一个修改路由的push方法也不管用

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

按钮的代码:

<template>
  <el-row>
    <el-button size="small" type="success" @click="addMember">新增</el-button>
    <el-button size="small" type="danger">删除</el-button>
  </el-row>
</template>

<script>
export default {
  name: 'operationMember',
  methods: {
    addMember () {
      this.$router.push({ path: '/addMember' })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

然后是addMember页,这里面现在还什么都没有:

<template>
  <div>asd</div>
</template>

<script>
export default {
  name: 'addMember'
}
</script>

<style lang="scss" scoped>
</style>

---

最后成功的样子是这样的:
路由里是这样写的:

{
    path: '/addMember',
    name: 'addMember',
    components: { addMember: () => import(/* webpackChunkName: "group-foo" */'../addMember') }
  },

router-view这边是这样的:

最后谢谢各位大佬的帮助,感谢大家

Answer 1

1. 首先，你要记得在父容器里使用 router-view
2. 其次，链接应该用 router-link
3. 链接应尽量用名称，不要用实际路径，方便维护
4. 所以这里你应该写成 router-link(:to="{name: 'member.new'}")
5. 报错本身是正常的

Answer 2

当前地址和你想跳转的目标地址相同　就会报这个错

Answer 3

不会用了子路由 页面中又有router-view吧
ps: 建议将addMember的代码贴出来, 并将按钮所在页面代码给全一点

犀利一笑^_^

Answer 4

排查：
1、第一次点击按钮之后，看看浏览器的url地址是否发生了变化，如果发生了变化，说明路由已经发生跳转，也就是 this.$router.push 完成了工作；从你的描述来看，你的这个跳转应该是发生了。
2、浏览器地址发生了变化，但是页面没有出来，这说明你的 路由显示的地方写的有问题，可以参考项目中其他页面，或者自己使用了说明路由去看看官方文档

浏览器错误：
你的描述其实是有问题的，点击第一次不是没有反应，可能浏览器地址栏已经发生了变化，只是你自己不知道而已；

当第一次点击之后，再次点击，vue-router就会 报错。因为他不允许相同路由 再 push 相同的路由