vue-element-ui中el-tabs标签在刷新页面后回到刷新前的标签页

在原创的基础上稍稍改动了一下

本文是为了记录曾经踩过的坑，愿以后的日子里不再踩坑

大家在用element-ui的tab切换时，可能会遇到这样的问题，就是比如我在标签页2新增了东西，要刷新页面，但是刷新后回到标签页1，这样又要点回去，就很麻烦，我遇到时是用下面的方法解决的，可能会很low，毕竟我还是个vue小白，如果哪个大神有更好的解决方法，请不吝赐教，感激不尽～

思路是这样的：

• 我希望可以通过url后的参数来区分这3个不同的tab，
• 根据视图改变url，根据url展示不同的视图，实现视图和url的同步，
• 这样即使刷新页面，因为url没有改变，视图也会回到刷新前的那个tab。

实现：

• @tab-click 是点击切换tab时的勾子，切换时更改url
• 刷新后，再通过url的不同展示不同的视图

<template>
    <div>
        <el-card style="position: relative;">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="标签页1" name="aaa">
                    <aaa-tab name="aaa"></aaa-tab>
                </el-tab-pane>
                <el-tab-pane label="标签页2" name="bbb">
                    <bbb-tab name="bbb"></bbb-tab>
                </el-tab-pane>
                <el-tab-pane label="标签页3" name="ccc">
                    <ccc-tab name="ccc"></ccc-tab>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

  
  

export default {
    data() {
        return {
			//activeName 是默认选中的tab，如果不写则会展示空白页面
			//这里默认展示第一个tab
            activeName: 'aaa'
        };
    },
    //组件
    components: {
        aaaTab,
        bbbTab,
        cccTab
    },
    mounted() {
    	//挂载时通过this.$route.query.type拿到url后的参数
        this.updateType();
    },
    methods: { 
        updateType() {
            let type = this.$route.query.type;
			//通过拿到的值不同，更改activeName的值
            if(type === '1') {
                this.activeName = 'aaa';
            }else if(type === '2') {
                this.activeName = 'bbb';
            }else if(type === '3') {
                this.activeName = 'ccc';
            }
        },
        // 切换tab时再根据标签名的不同将url中的参数值改掉
        handleClick(tab) {
            let queryType;
            if(tab.name == 'aaa') {
                queryType = 1;
            }else if(tab.name == 'bbb') {
                queryType = 2;
            }else if(tab.name == 'ccc') {
                queryType = 3;
            }
			//将新的值和url放在一起拼成一个完整的路径
            this.$router.push({
                path: '/qqqqq/wwwww/page.do',
                query: {
                    type: queryType || 1
                }
            });
        }
    }
};

  
  

初始的时候由于没有参数值也没有点击切换，所以刷新的时候自然是展示第一个tab，所以也不用担心这个问题啦～

由于小白一枚，所以急需大神指点～