<el-menu>标签route属性与default-active属性冲突问题 | 青训营笔记这是我参与「第四届青训营

这是我参与「第四届青训营」笔记创作活动的的第3天。
使用平台：git for windows, chorme, vscode(win端), vue3, element-plus

1.需要实现的效果

在前端监控系统大作业代码的编写过程中，我们小组想实现一个含有固定的菜单和局部刷新的主体的页面，点击菜单上的不同栏目切换主体，实现选单页面的效果。
我们小组认为相较于将所有监控数据都展现在一个页面上，这样可以更清晰地展现出不同分类的数据，方便用户快速找到想要查看的栏目。

为了能快速确定框架并实现一个方便测试的效果，我们采用了vue3+TS+vite+element-plus的框架，使用<el-menu>标签实现固定菜单，并在标签中加入route属性，结合vue-route实现页面的切换效果。为了在用户打开页面的时候显示第一个菜单项的内容，我们在router的index.ts中加入了redirect 键并设置为第一个菜单项的页面。

<el-menu :router="true">
...

<el-menu>标签后跟随代表几个菜单选项的<el-menu-item>标签，通过将index值设定为router的path实现页面与路由的绑定。

接下来是router文件夹中的index.ts，在这里通过打开页面的默认根目录设置重定向，将概览页面（/overview）设置为默认跳转的页面。
（后来我发现这里的代码还有改进的空间，将import提出放到文件开头会更加方便代码统一集中更改）

const routes = [
    {
      path: '/',
      name: 'home',
      component: HomeView,
      // 如果是根目录的话重定向到overview
      redirect:"/overview",
      children:[
        {
          path:"/overview",
          name:"overview",
          component:() => import("../views/pages/overView/overView.vue")
        },
        ...//其他菜单页面
      ]
    }

这样一套下来，页面的切换效果的确是实现了，但是在打开页面之后，随着第一个菜单对应主体内容的显示（即/overview路由所引导的overView.vue），菜单本身（即<el-menu-item>标签）却没有高亮显示，这样不利于菜单分类与主体的对应关系显示。我就想着该如何解决这个问题。

2.尝试解决问题

查询资料后，我首先想到的是利用select事件绑定函数，以设置default-active属性。在<el-menu>中，绑定事件：

<el-menu :default-active="activeIndex" @select="selectmenu" :router="true">

在methods中写入函数：

<script lang="ts"> 
export default { 
    methods:{ 
        selectmenu(index: any){ 
            (this as any).activeIndex = index 
            window.localStorage.setItem('activeIndex', (this as any).activeIndex) 
               } 
        }, 
    } 
</script>

在原来的代码改动成以上代码后，并未起作用。
我尝试以console.log形式输出数据，又修改了几次代码形式，但是除了[Vue warn]: Property "activeIndex" was accessed during render but is not defined on instance. 的报错外一无所获，手动点击菜单也无法触发console.log。我想可能是select事件绑定本身作用时间的问题，变量的声明可能发生在页面onload之后，导致变量本身未定义。

3.解决问题

在查阅了一系列资料后，我发现直接绑定route.path的方法是可行的

<el-menu :default-active="$route.path" :router="true">
...

我猜测可能原因有：
1.route的初始化优先于页面渲染，使得default-active属性的赋值。
2.activeIndex传入参数而非传入有效的引用，导致本应提前执行的变量声明并未执行，变量未定义

但是vue中的$router实例方法相较于前一个在代码中自己定义的方法，为何就可以完美运行呢？

4.一些感想

虽然我对于JavaScript的知识可以应用到vue及相关生态的学习中来，但是对于框架的理解还是不够到位，仅是猜测Bug产生的原因而没有办法设计有效的验证，今后对于框架的学习应该更加深入才是。