Vue.js 路由器链接未更新

Question

我遇到了一个问题，我已使用以下简化代码重现了该问题:

应用程序.vue

      <router-link to="/">Home</router-link> |
      <router-link :to="{name: 'View1', params: {myprop: 'hello 1'}}"> |
         View 1 - Param 1
      </router-link>
      <router-link :to="{name: 'View1', params: {myprop: 'hello 2'}}"> |
         View 1 - Param 2
      </router-link>
      <router-view :key='$route.path' />

View1.vue

    <template>
      <div>
        My prop = {{myprop}}
      </div>
    </template>

如果我从主页链接开始并单击“View 1 - Param 1”，我将转到 View1 并看到“My prop = hello 1”。这符合预期。

如果我返回主页并单击“View 1 - Param 2”，我将进入 View1 并看到“My prop = hello 2”。这也在意料之中。

这就是麻烦开始的地方。如果我在已经处于“ View 1 - 参数 2”状态时单击“ View 1 - 参数 1”，则会转到 View 1，但消息不会更新。因此，我再次看到“My prop = hello 2”，而不是看到“My prop = hello 1”。

我的理解是，Vue 不会将 View1 重新渲染作为优化，因为“from” View 和“to” View 是相同的，但显然这不是我想要的行为。

我对此做了一些研究，并发现了一个视频，建议在 View 标签中使用“key='$route.path'”来解决这个问题。但是，这并不能解决我的问题。

请问解决此问题的正确方法是什么？

Answer 1

您的解决方案将不起作用，因为 $route.path 字符串不包含查询参数。因此，当您将 go 从“View 1 - Param 2”更改为“View 1 - Param 1”时，$route.path 保持不变，并且不会更新 View 。

使用$route.fullPath这将更新 View ，因为它包含完整解析的URL，包括查询和哈希。

<router-link to="/">Home</router-link> |
<router-link :to="{name: 'View1', params: {myprop: 'hello 1'}}"> |
   View 1 - Param 1
</router-link>
<router-link :to="{name: 'View1', params: {myprop: 'hello 2'}}"> |
   View 1 - Param 2
</router-link>
<router-view :key='$route.fullPath' />

或者，您可以将观察器添加到“View1.vue”内的路由查询参数中。这样您就不必将 key 添加到您的 router-view

View1.vue

<template>
  <div>
     My prop = {{pageProp}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageProp: ""
    }
  },
  watch: {
    "$route.query": {
      immediate: true,
      handler(n) {
        this.pageProp = n.myProp
      }
    }
}
</script>