Блог

У меня есть динамический маршрут с 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. Но каждая навигация использует один и тот же экземпляр компонента, как указано в документах vue-router здесь .

Я хочу переопределить это поведение, чтобы каждая новая навигация создавала новый экземпляр компонента Vue. Если это не поддерживается напрямую, любое обходное решение также будет полезно.

Вам просто нужно добавить :key="$route.path" его в свой родительский компонент.

Что-то вроде:

App.vue

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

Объяснение

Ключ действует как своего рода флаг, который сообщает Vue «если данные, связанные с этим дочерним компонентом, перемещены куда-то еще, переместите компонент вместе с ним, чтобы сохранить изменения, которые уже существуют». Поскольку вы перешли к тому же компоненту (тот же маршрут, но просто другой :id ), вы хотите повторно отобразить компонент. Будьте осторожны с этим подходом: он повторно отображает все компоненты и подкомпоненты

В шаблоне есть опечатка:key=»$route.path», а не $router:

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