vue-router如何避免重复的push

Question

我有这样一个场景，我有一系列tab，使用vue-router进行切换。假设是这样的（伪代码）：

import VueRouter from 'vue-router'
new VueRouter({
    routes:[
        {
            path:'/tab1',
            component: Tab1,
            name:'tab1'
        },
        {
            path:'/tab2',
            component: Tab2,
            name:'tab2'
        },
        {
            path:'/tab3',
            component: Tab3,
            name:'tab3'
        }
    ]
})

<template>
<div>
    <div>
        <span @click="switch(item)" v-for="(item,index) in tabs" :key="index">{{item}}</span>
    </div>
    <router-view></router-view>
</div>
</template>
<script>
    export default {
        data(){
            return {
                tabs:['tab1','tab2','tab3']
            }
        },
        methods:{
            switch(name){
                this.$router.push({
                    name
                })
            }
        }
    }
</script>

每次switch都会push一条新的history，比如我先依次点击tab1、tab2、tab3，浏览器的history记录里面会新增三条记录。然后我再点击tab1，我并不想再push一条history，这里可以直接this.$router.go(-2),但是假如在安卓上，用户也可以通过back键切换路由，我也可以watch route.name的变化用一个数组记录所有tab的变化并排除掉其他的路由，这样可以解决问题。但是这样并不是一种通用的解决方案。

有没有哪位大神遇到过类似的问题，求告知

Answer 1

你vue-router的模式是history模式吧？改成hash模式，hash模式下，相同的hash值是不会在浏览记录历史栈中添加记录的。详情可参考：https://segmentfault.com/a/11...

Answer 2

自个在探索过程中，找到了一些库：
https://github.com/luojilab/v...
https://github.com/hezhongfen...

所以看来vue-router本身没有支持该功能，只能依靠社区了。

Answer 3

replace

Answer 4

let routerArray = []
routerArray.push({
    path: '*',
    name: 'a',
    component: ''
  })
router.matcher = new Router({
    mode: 'history'
}).matcher

router.addRoutes(routerArray)

router.matcher 属性的修改会替换原有的路由。
router.addRoutes 重新放入新的路由

这样修改，就不会有重复的路由。

可以参考vue-router工作原理概述和问题分析