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

Question

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

在设置中我有

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

我退回它然后打印出来

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

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

Answer 1

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

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

这将设置 curVidType 的值，以在 videoTopics 执行时更改

编辑：

阅读评论并查看评论并阅读一些文档后， ref() 将创建一个反应式 object 但我不确定它是否对原始 object 做出反应。 但看起来toRef() function 可以创建那个桥。

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

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

Answer 2

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

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

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

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

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

Answer 3

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

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