ANTD VUE官方的MENU demo切换时无法高亮选中的菜单

Question

<template>
  <div>
    <a-menu v-model="current"  :router="true" mode="horizontal" >
      <a-menu-item key="mail"> <a href="/" rel="noopener noreferrer"><a-icon type="home" />Main Base</a
        ></a-menu-item>
      <a-menu-item key="Application"> <a href="/vue/" rel="noopener noreferrer"><a-icon type="appstore" />Sub Application</a
        ></a-menu-item>
    </a-menu>
    <!-- 加载默认切换 -->
    <router-view></router-view>
    <!-- 用于显示vue自已公用内容 -->
    <div id="vue">
      
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      current: ['mail'],
    };
  }
};
</script>

在菜单中加上了A标签之后，切换菜单，当前的菜单无法高亮，有大神解答一下吗，第一次接触这个框架

Answer 1

估计是current值没变，a标签加个事件，修改对应current值，跳转可以写在事件中

Answer 2

刷新页面current当然会变成默认值，单页应用，菜单在router-view外层，跳转页面用vue-router跳，a标签跳转会刷新页面。
刷新页面保持选中一般在beforeEach里面根据进入页面判断，包括登录权限等逻辑