Question

我遇到了一个使用以下简化代码复制的问题：

App.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>

如果我从“主页”链接开始并单击“视图1-参数1”，则会被带到View1并看到“我的道具=你好1”。符合预期。

如果我然后返回主页并单击“视图1-参数2”，则将进入“视图1”并看到“我的道具=你好2”。这也符合预期。

这是麻烦开始的地方。如果在我已经在“ View 1-Param 2”上时单击“ View 1-Param 1”，那么我将转到View1，但消息不会更新。因此，我再次看到“我的道具=你好2”，而不是看到“我的道具=你好1”。

我的理解是，Vue不会将View1重新呈现为优化，因为“从”视图和“到”视图是相同的，但是显然这不是我想要的行为。

我对此进行了一些研究，并发现了一个视频，该视频建议在视图标记中使用“ key ='$ route.path'”可以解决此问题。但是，这不能为我解决问题。

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

Answer 1

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

使用$route.fullPath将更新视图，因为它包含完整的解析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>

Answer 2

你可以使用

<router-view :key ='$route.params'/>

而不是使用

<router-view :key ='$route.path'/>

就我而言，它奏效了。

Vue.js路由器链接未更新

2 个答案: