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>Wele 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

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>Wele 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

• javascript
• vue.js
• vue-router
• vuejs3

3 Answers 3

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

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

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 puted value, you can have it react to changes in the router params.

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

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

EDIT:

Having read the ments and looked at the ments 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

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>