Vue - 强制更新 URL 中的新 id

Question

在我的 Vue2 应用程序中，我在占据主视图的组件上使用 id 参数，例如 http://localhost:8080/#/basereports/watercombochart/129

表示加载了id设置对应129的图表。

这一切都很好，除了如果我得到相同的 URL 只更改了 id，我必须手动刷新才能让它重新加载。 Vue 没有检测到变化。

我一直使用键来强制子组件刷新，但是主视图组件不是子组件，所以我不确定如何重新调用组件以强制更新。

当 URL 上的 id 发生变化时，触发非子组件更新的好方法是什么？

Answer 1

在他上面的评论中提到Dan's link，这是我需要的线索。即使只更改了 URL 参数，我也能够让我的 body 组件重新渲染。下面的代码将该主体组件注入到我的 SPA 的视图区域中，并在其下方附加页脚组件：

<template>
  <v-main>
    <router-view :key="$route.fullPath" />
    <c-v-footer />
  </v-main>
</template>

<script>
  export default {
    name: 'CVView',
    components: {
      CVFooter: () => import('./CVFooter'),
    },
  }
</script>

我的原始代码没有包含 :key=$route.fullPath 属性，如果只更改 URL 参数，主体组件不会重新渲染。