el-menu刷新回到默认

一般在写后台管理系统，使用menu组件，每个都是一条路由，然而，有时候我们在某个路由上刷新一下，路由还保留着，但是menu-item的高亮效果却到了默认的那一项上，就很无语,下面是我改良过的，

思路嘛，就是把el-menu的default-active这个属性不给它常量，给它一个变量，这个变量在onmouted生命周期中拿到路由对象的path即可在刷新后保持高亮状态

<el-menu
        :default-active="defaultRoute"
        active-text-color="#fb9337"
        class="el-menu-vertical-demo"
        @select="handleSelect"
      >
        <el-menu-item index="/index/business">
          <el-icon><icon-menu /></el-icon>
          <span>出差申请</span>
         
        </el-menu-item>
        <el-menu-item index="/index/outside">
          <el-icon><icon-menu /></el-icon>
          <span>外勤打卡</span>
        </el-menu-item>
        <el-menu-item index="/index/leave">
          <el-icon><document /></el-icon>
          <span>请假申请</span>
        </el-menu-item>
        <el-menu-item index="/index/work">
          <el-icon><setting /></el-icon>
          <span>加班申请</span>
        </el-menu-item>
      </el-menu>
<script setup>
import { onMounted,ref } from 'vue'
import {useRouter,useRoute} from 'vue-router'
var $router=useRouter()
var $route=useRoute()
var defaultRoute = ref('')
var handleSelect=(index)=>{
console.log(index)
$router.push(index)
}
onMounted(()=>{
    defaultRoute.value=$route.path
    console.log($route.path)
})
</script>