vue-router 重用组件

Vue Router 有一个特性，即在路由切换时可以重用之前已经创建的组件实例，而不是每次都创建一个新的实例。这个特性可以大幅提升应用的性能，特别是当你的组件比较复杂、需要进行一些初始化操作的时候。

要启用组件重用，你需要在路由配置中添加一个 `key` 属性，例如：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home,
      // 添加 key 属性
      key: 'home'
    },
    {
      path: '/about',
      component: About,
      // 添加 key 属性
      key: 'about'
    }
  ]
})

当路由切换时，如果新的路由和之前的路由都使用了同一个组件，那么这个组件会被重用，并且会调用 `beforeRouteUpdate` 和 `activated` 钩子函数。如果新的路由使用了一个新的组件，那么旧的组件会被销毁并调用 `deactivated` 钩子函数，新的组件会被创建并调用 `beforeRouteEnter` 钩子函数。

需要注意的是，如果你使用了动态路由参数，例如 `/user/:id`，那么你需要为每个不同的参数创建一个不同的组件实例，否则会出现组件状态混乱的问题。你可以使用 `watch` 监听 `$route` 对象的变化，并在变化时手动销毁旧的组件实例。具体实现可以参考官方文档中的示例代码。