element-ui: navmenu default-active 属性对程序生成的menuitem 不起作用

Question

一个简单的navmenu，当直接写出每个menuitem时，可以自动根据路由选中菜单项，这样当输入http://localhost/#/admin时，可见“系统管理”菜单项激活，用鼠标点击也同样有效。

<el-menu
  :default-active="$route.path"
  router>
  <el-menu-item index="/d">查阅</el-menu-item>
  <el-menu-item index="/docadmin">档案维护</el-menu-item>
  <el-menu-item index="/admin">系统管理</el-menu-item>
</el-menu>

但尝试动态生成菜单项时，无法自动根据导航地址激活菜单，并且鼠标点击要点第二次才会激活：

<el-menu
  theme="dark"
  :default-active="$route.path"
  mode="horizontal"
  router>
  <el-menu-item v-for="route in routes" :key="route.path" :index="route.path">{{ route.name}}</el-menu-item>
</el-menu>

请问原因及解决方法？

Answer 1

我是猪。。
原因是route数据没有带前面的'/'。。
原数据：

[
  {path: 'd', name: '查阅', component: About},
  {path: 'admin', name: '系统管理', component: MainView},
  {path: 'docadmin', name: '档案维护', component: LayoutMain}
]

改成以下就OK了：

[
  {path: '/d', name: '查阅', component: About},
  {path: '/admin', name: '系统管理', component: MainView},
  {path: '/docadmin', name: '档案维护', component: LayoutMain}
]

Answer 2

遇到同样的问题了，请问题主解决了吗？

Answer 3

解决了吗？怎么做的？