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>