路由导航刷新后导致当前选中的导航样式不见的解决办法

以element ui的导航组件为例：

根据router获取当前的url进行判断设置自己的自定义active样式处理，如果有更好的办法，欢迎指出

<template>
<el-menu background-color="#545c64" text-color="#fff" >
<el-menu-item index="1" :class="{active:$route.name==='test1'}" @click="goToTest1">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="2" :class="{active:$route.name==='test2'}" @click="goToTest2">
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
</el-menu>
</template>

<script>
export default {
name: "NavLeft",
activeNav: "",
methods: {
goToTest1() {
this.$router.push("/home/test1");
},
goToTest2() {
this.$router.push("/home/test2");
}
}
};
</script>

<style lang='less' scoped>
.active {
color: #ffd04b !important;
}
</style>