强制不要在动态路由，vue-router中重用同一组件实例

如何解决强制不要在动态路由，vue-router中重用同一组件实例

我有一条带有vue-router的动态路由，

import customreportWrapper from './customreportWrapper.vue';

let router = new Router({
  mode: 'history',routes: [{
      path: '/insights/custom-reports/:id',name: 'custom-reports',page: 'insights',component: customreportWrapper
  }]
})

每次有人导航到此路线时，都会使用CustomreportWrapper.vue进行渲染。但是它们每个导航都使用相同的Component实例，如 vue-router docs here.

中所述

我想重写此行为，以便每个新的导航都创建一个新的Vue组件实例。如果不直接支持此操作，则任何解决方法也将有所帮助。

解决方法

您只需要将:key="$route.path"添加到父组件中即可。

类似的东西：

App.vue

<template>
  <main :key"$router.path">
    <router-view></router-view>
  </main>
</template>

说明

该键充当一种标志，告诉Vue“如果与此子组件关联的数据被移动到其他地方，则将该组件连同它一起移动以保留已经存在的更改”。由于您导航到相同的组件（相同的路线，但只是不同的:id），因此您想重新呈现该组件。不过请谨慎使用此方法：它会重新呈现所有组件和子组件