Vue路由器参数未在页面中更新答案

【问题标题】：Vue Router params not updating in pageVue路由器参数未在页面中更新
【发布时间】：2021-07-23 03:44:06
【问题描述】：

您好，我的视图中有一些基于当前页面的条件逻辑

在设置中我有

const curVidType = ref(route.params.videoTopic);

我把它退回来，然后像这样打印出来

<h1>Welcome to  {{ curVidType }} videos</h1>

但它只有在我刷新时才有效。如果我浏览到新页面，即使浏览器 url 发生变化，它也会保持旧页面。刷新后更新。非常感谢您的帮助

【问题讨论】：

标签： javascript vue.js vue-router vuejs3

【解决方案1】：

您将变量初始化为 const，这意味着它执行一次，然后不设置它。如果将 curVidType 更改为计算值，则可以让它对路由器参数中的更改做出反应。

computed: {
  curVidType() {
    return route.params.videoTopics
  }
}

这将设置 curVidType 的值以在 videoTopics 发生变化时更改

编辑：

阅读了 cmets 并查看了 cmets 并阅读了一些文档后，ref() 将创建一个反应性对象，但我不确定它是否会对原始对象做出反应。但看起来toRef() 函数可以创建那个桥。

const curVidType = toRef(route.params, 'videoTopics')

应该允许 curVidType.value 也反映对 route.params.videoTopics 的更改

【讨论】：

这不是个案。当然computed 应该会有所帮助，但是ref 正在返回一个带有反应性value 属性的ProxyObject。这个属性被覆盖而不是整个const
curVidType 是响应式的，但是什么改变了值？它由 ref(route.params.videoTopic) 初始化设置，但这意味着 curVidType 对象具有一个已设置的字段值。 route.params.videoTopic 正在改变，但 curVidType 没有。

【解决方案2】：

如果您能与我们分享更多代码以帮助您，那就太好了。这应该可以正常工作

<template>
{{ curVidType }}
</template>

<script>
import { useRoute } from 'vue-router';

export default {
    setup() {
        const { params } = useRoute();
        const curVidType = params.videoTopic

        return {
            curVidType,
        };
    },
};
</script>

【讨论】：

【解决方案3】：

尝试将:key 添加到您的组件中，以确保它在参数更改时更新：

<your-component :key="$route.params.videoTopic"></your-component>

【讨论】：