我遇到了一个问题,我已使用以下简化代码重现了该问题:
应用程序.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'”来解决这个问题。但是,这并不能解决我的问题。
请问解决此问题的正确方法是什么?
最佳答案
您的解决方案将不起作用,因为 $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>
关于Vue.js 路由器链接未更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62868980/