解决Vue3.0整合element plus时el-menu导航选中后刷新页面保持当前选中状态

简要概述

• element plus是element官方针对Vue3.0做的一套前端UI组件，在开发过程中经常会使用到el-menu这个组件，而且我们会将当前激活的菜单设置高亮，而如果不设置default-active属性，我们则会遇到刷新页面后当前激活的菜单项不高亮的问题
• 下面来解决这个问题，本文是根据vue3做的，之前在网上看到好多教程，都是提示将default-active设置为$router.path，而在vue3中并没有起作用。

解决步骤

• 我通过浏览器console出‘this.$router.currentRoute’
  即

console.log('打印路由',this.$router.currentRoute);

在浏览器看到：

在这里打印出了我们想要的路由**“explainer1”**!!!
所以我们可以通过this.$router.currentRoute._value.fullPath访问到当前激活的url，然后将default设置为这个值，我们的这个问题就解决了

• 我的解决办法：

//el-menu里进行数据绑定
<el-menu
      background-color="#333744"
      text-color="#fff"
      active-text-color="#ffd04b"
      :unique-opened="true"
      :default-active="paths"
       router >
//在script中数据赋值
data() {
    return {
      paths:this.$router.currentRoute._value.fullPath.split("/")[1],
     }
}

然后刷新就可以解决问题了！！

水平有限，如有错误还请指定！