浏览器前进后退按钮联动vue菜单高亮和面包屑变化

在mounted里监听popstate事件，change里面写要改变的方法逻辑，来改变高亮和面包屑

<template>
    <!-- 菜单 -->
    <div class="menu">
        <div class="btn" @click="isExpand">
            <i class="iconfont iconcollapse"></i>
        </div>
        <el-menu
            :collapse-transition="false"
            :default-active="activeIndex"
            router
            active-text-color="#009DFF"
            background-color="#2c3656"
            text-color="#fff"
            unique-opened
            :collapse="isCollapse"
        >
            <el-submenu v-for="item1 in menuList" :key="item1.id" :index="item1.id.toString()">
                <!-- 一级菜单 -->
                <template slot="title">
                    <i :class="'iconfont ' + item1.icon"></i>
                    <span slot="title" class="tit">{{ item1.name }}</span>
                </template>
                <!-- 二级菜单 -->
                <el-menu-item
                    v-for="item2 in item1.children"
                    :key="item2.id"
                    :index="item2.path"
                    @click="saveActiveIndex(item2.path, item2.parent_name, item2.name)"
                >
                    <span slot="title">{{ item2.name }}</span>
                </el-menu-item>
            </el-submenu>
        </el-menu>
    </div>
</template>

<script>
import router from '@/router';
export default {
    name: 'home',
    data() {
        return {
            menuData: [],
            isCollapse: false,
            activeIndex: ''
        };
    },
    props: ['menuList'],
    methods: {
        // 保持菜单状态
        saveActiveIndex(path, parent_name, name) {
            const activeMenu = {
                path: path,
                parent_name: parent_name,
                name: name,
                time: Date.parse(new Date())
            };
            this.$emit('activeMenu', activeMenu);
            delete activeMenu.time;
            window.sessionStorage.setItem('ActiveIndex', JSON.stringify(activeMenu));
        },
        // 菜单折叠
        isExpand() {
            this.isCollapse = !this.isCollapse;
            this.$emit('isCollapse', this.isCollapse);
        },
        change() {
            this.activeIndex = this.$route.path;
            let menuListAll = JSON.parse(window.sessionStorage.getItem('menuList'));
            console.log(Array.isArray(menuListAll));
            menuListAll.forEach(item => {
                if (item.children) {
                    item.children.forEach(secItem => {
                        if (secItem.path == this.$route.path) {
                            const activeMenu = {
                                path: secItem.path,
                                parent_name: secItem.parent_name,
                                name: secItem.name,
                                time: Date.parse(new Date())
                            };
                            this.$emit('activeMenu', activeMenu);
                            delete activeMenu.time;
                            window.sessionStorage.setItem('ActiveIndex', JSON.stringify(activeMenu));
                        } else {
                            if (secItem.children) {
                                secItem.children.forEach(thirItem => {
                                    if (thirItem.path == this.$route.path) {
                                        const activeMenu = {
                                            path: thirItem.path,
                                            parent_name: thirItem.parent_name,
                                            name: thirItem.name,
                                            time: Date.parse(new Date())
                                        };
                                        this.$emit('activeMenu', activeMenu);
                                        delete activeMenu.time;
                                        window.sessionStorage.setItem('ActiveIndex', JSON.stringify(activeMenu));
                                    }
                                });
                            }
                        }
                    });
                }
            });
        }
    },
    created() {
        this.change();
    },
    mounted() {
        this.$emit('update:menuList', JSON.parse(window.sessionStorage.getItem('menuList')));
        if (window.history && window.history.pushState) {
            history.pushState(null, null, document.URL);
            window.onpopstate = () => {
                this.change();
                console.log(this);
            };
        }
    }
};
</script>