强制不要为动态路由重用相同的组件实例，vue-router答案

【问题标题】：Force Don't reuse same component instance for Dynamic routes, vue-router强制不要为动态路由重用相同的组件实例，vue-router
【发布时间】：2021-02-03 07:33:20
【问题描述】：

我有一个像这样的 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 组件实例。如果不直接支持这一点，任何解决方法也会有所帮助。

【问题讨论】：

标签： vue.js vue-router dynamic-routing

【解决方案1】：

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

类似：

App.vue

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

说明

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

【讨论】：

【解决方案2】：

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

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

【讨论】：