CODEWITHSUNDEEP
javascriptvue.jsvue-routervuejs3
atx123n
atx123n

Reputation: 53

Vue Router params not updating in page

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

Upvotes: 2

Views: 5153

Answers (3)

Royal
Royal

Reputation: 39

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

Upvotes: 2

Adam Orłowski
Adam Orłowski

Reputation: 4484

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

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

Upvotes: 5

NICO
NICO

Reputation: 1843

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>

Upvotes: 0

Related Questions