Vue.js 路由切换页面异常，组件不能正常刷新？

Question

问题

刚开始学Vue，尝试用Element UI随便写了一个页面，发现导航的路由有问题。
问题非常诡异看了特别久也没看出什么问题故前来求教。项目用@Vue/Cli的UI创建的

路由配置：

router.ts

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/dailytools/Currency',
      name: 'currency',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "currency" */ './views/Currency.vue'),
    },
  ],
});

main.ts

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import './plugins/element.js';
import i18n from './i18n';

Vue.config.productionTip = false;

new Vue({
  router,
  i18n,
  render: (h) => h(App),
}).$mount('#app');

当我由Home切换到Currency之后，router-view只显示Currency的内容，如果不刷新，就无法再回到Home。

<el-main class="pwp-main">
      <router-view :key="key"></router-view>
</el-main>

computed: {
    key() {
      return this.$route.name !== undefined
        ? this.$route.name + +new Date()
        : this.$route + +new Date();
    }
}

导航用的是el-menu，绑定了:router="true"。

个人感觉是路由配置的问题但是不知道正确的该怎么写。求大佬帮忙解决。

========

补充：
测试了一下，在router.ts中，只要currency导入了，那么就切换不回home

Answer 1

把菜单提取到App.vue中