elementui NavMenu导航菜单在路由跳转失败后，active样式仍按跳转后的路径显示

问题描述：

　　点击导航栏时，如果当前页面内容仍在播放，则先确认是否跳转，若确认跳转则执行xxx关闭播放再进行跳转；若取消跳转，则不进行跳转。此时出现问题：取消跳转后虽然实际并未跳转，但导航栏active样式已经生效到点击项。

路由跳转前代码如下：

beforeRouteLeave(to, from, next) {
        if (this.isStart) {
            this.$confirm('当前有场景正在回放，是否切换页面？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    if (this.xlname == '') return;
                    this.order = 3;
                    this.suspend = 3;
                    this.startStop = 1;
                    this.startStopicon = require('@/assets/img/video/pause.png');
                    this.isSuspend = !this.isSuspend;
                    var param = {
                        id: this.activeId,
                        order: this.order,
                        rate: this.rate,
                        startTime: this.startTime,
                        type: 2
                    };
                    window.localStorage.setItem('replay', JSON.stringify(param));
                    replay(param).then((res) => {
                        if (res.code === 200) {
                            debugger;
                            next();
                        }
                    });
                })
                .catch(() => {
                    console.log('@@@');
                    //bus.$emit('deilverTitle', 'xxxx');
                });
        } else {
            next();
        }
    },

解决方法：

1、首先尝试更改导航栏中active属性在哪项中，但效果不对

2、直接替换active属性，将active对应样式修改成普通样式，再加isSelected属性来重新标志当前选中项，代码如下：

<div class="sidebar">
        <el-menu
            class="sidebar-el-menu"
            :default-active="onRoutes"
            :collapse="collapse"
            background-color="#0c1119"
            text-color="#fff"
            active-text-color="#fff"
            router
        >
            <template v-for="item in items">
                <template v-if="item.subs">
                    <el-submenu :index="item.index" :key="item.index">
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span slot="title">{{ item.title }}</span>
                        </template>
                        <template v-for="subItem in item.subs">
                            <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
                                <template slot="title">{{ subItem.title }}</template>
                                <el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index" :class="threeItem.index==onRoutes?'isSelected':''">{{
                                    threeItem.title
                                }}</el-menu-item>
                            </el-submenu>
                            <el-menu-item v-else :index="subItem.index" :key="subItem.index" :class="subItem.index==onRoutes?'isSelected':''">{{ subItem.title }}</el-menu-item>
                        </template>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :index="item.index" :key="item.index" :class="item.index==onRoutes?'isSelected':''">
                        <i :class="item.icon"></i>
                        <span slot="title">{{ item.title }}</span>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>

.isSelected {
    background: linear-gradient(90deg, #4b83b1 5%, rgb(33, 36, 49) 70%) !important;
    color:rgb(161, 183, 217) !important;
}

computed: {
        onRoutes() {
            return this.$route.path.replace('/', '');
        }
    },

onRoutes用来获取当前路径，与比较菜单路径判定isSelected。