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() {
    	//掛載時經過location.search拿到url後的部分
        this.updateType();
    },

    methods: { 
        updateType() {
            let type = location.search;
			
			//經過拿到的值不一樣，更改activeName的值
            if(type === '?type=1') {
                this.activeName = 'aaa';
            }else if(type === '?type=2') {
                this.activeName = 'bbb';
            }else if(type === '?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，因此也不用擔憂這個問題啦～

因爲小白一枚，因此急需大神指點～