vue-router component 共用

在Vue Router中，当两个路由使用相同的组件时，这两个路由的组件实例是共用的，也就是说它们会共享同一个组件实例。这种行为可以提高性能，避免不必要的组件重复渲染，但也可能导致一些问题，比如组件状态的共享等。

如果你想要在两个路由中使用相同的组件，但是不希望它们共享同一个组件实例，可以通过以下方式实现：

1. 使用不同的路由名称

在定义路由时，给这两个路由使用相同的组件时，分别定义不同的路由名称，这样它们就会使用不同的组件实例。

const router = new VueRouter({
  routes: [
    {
      path: '/route1',
      name: 'route1',
      component: MyComponent
    },
    {
      path: '/route2',
      name: 'route2',
      component: MyComponent
    }
  ]
})

2. 使用路由元信息meta

在路由组件中通过路由元信息meta来判断当前路由是否需要重新渲染组件，如果需要则通过动态key来强制重新渲染组件。

const router = new VueRouter({
  routes: [
    {
      path: '/route1',
      component: MyComponent,
      meta: { needUpdate: true }
    },
    {
      path: '/route2',
      component: MyComponent,
      meta: { needUpdate: false }
    }
  ]
})

// 在组件中监听$route变化
watch: {
  $route(to, from) {
    if (to.meta.needUpdate) {
      this.key = Date.now() // 通过动态key强制重新渲染组件
    }
  }
}

以上两种方法都可以实现在两个路由中使用相同的组件，但是不共用同一个组件实例的效果。