0

我有一个像这样的 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 文档中所述。

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

4

2 回答 2

1

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

就像是：

应用程序.vue

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

解释

该键充当一种标志，告诉 Vue “如果与此子组件关联的数据被移动到其他地方，那么将组件连同它一起移动以保留已经存在的更改”。由于您导航到相同的组件（相同的路线但只是不同:id），因此您希望重新渲染该组件。不过要小心这种方法：它会重新渲染所有组件和子组件

于 2020-10-20T13:55:05.583 回答
0

模板有一个错字，:key="$route.path"，而不是$router：

<template>
  <main :key="$route.path">
    <router-view></router-view>
  </main>
</template>
于 2021-10-13T08:35:17.673 回答