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

Question

Hello I have some conditional logic in my view based on the current page

in setup I have

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

I return it and then print out like

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

However it only works if I refresh. If I browse to a new page it stays the old one even though the browser url changes. after refresh it updates. Thanks so much for any help

Answer 1

You're initializing the variable as a const, which means it does it once and then doesn't set it. If you change curVidType to a computed value, you can have it react to changes in the router params.

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

This will have the value of curVidType set to change when videoTopics does

EDIT:

Having read the comments and looked at the comments and read some of the documentations, ref() will create a reactive object but I'm not sure it's reacting to the original object. But it looks like the toRef() function can create that bridge.

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

Should allow for curVidType.value to also reflect changes to to route.params.videoTopics

Answer 2

Would be nice if you could share some more code with us in order to help you. This should just work fine

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

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

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

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

Answer 3

Try adding :key to your Component to make sure it updates when param changes:

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