关于vue路由二次跳转问题的记录

一、问题描述

今天在写自己的小项目的时候遇到一个问题，点击路由跳转的时候会有两次跳转，一次是正常跳转，一次是从根路由跳转到目标路由。

代码如下：

路由跳转代码：

this.$router.push({
    name: "address",
    params: {
    checkedList: this.checkedList,
    unCheckedList: this.unCheckedList,
    totalPrice: this.totalPrice
  }
});

路由配置代码：

const routes = [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
        path: '/shoppingCart',
        name: 'shoppingCart',
        component: ShoppingCart
    },
    {
        path: '/address',
        name: 'address',
        component: Address
    },
    {
        path: '/confirmOrder',
        name: 'confirmOrder',
        component: ConfirmOrder
    },
    {
        path: '/payment',
        name: 'payment',
        component: Payment
    },
    {
        path: '/success',
        name: 'success',
        component: Success
    },
    {
        path: '*',
        redirect: {name: 'home'}
    }
]

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

问题截图：

 

 

二、解决过程

一开始我怀疑是路由配置问题，可是检查了好几遍都没看出路由配置有什么问题；于是转换思路，我平时都是使用hash模式，但是这次使用的是history模式，于是我我又把模式换成了hash模式，这时并没有两次跳转，只进行了一次跳转，可是最终跳转到了根路径。然后我又把跳转路径换了，可每次只要是从这里跳转的都会有这个问题，在别处跳转的都没有问题。可是我检查了路由跳转方式是没有问题的，于是我找到了跳转的元素，发现那是一个a标签，最后终于真相大白了。a标签默认会跳转，只需要给a标签加个阻止默认事件就好。

三、解决方法

1、给a标签加.prevent事件修饰符

地址确认

2、或者换个标签，不用a标签就行了

四、反思

要注意原生元素的默认事件，有时候是个大坑，坑了我两个小时