Nuxt•4mo ago

useRoute not working with static website?

Hi, why class "active" is not working with prerender static website? My reproduction code: https://stackblitz.com/edit/github-xwmppm?file=pages%2Findex.vue Code is like this:

<template>
    <div>
        Current active tab: {{ activeTab }}
        <div>
            buttons:
        </div>
        <button :class="{ 'active': activeTab === 0 }">Button 0</button>
        <button :class="{ 'active': activeTab === 1 }">Button 1</button>
        <button :class="{ 'active': activeTab === 2 }">Button 2</button>
        <button :class="{ 'active': activeTab === 3 }">Button 3</button>
        <button :class="{ 'active': activeTab === 4 }">Button 4</button>
    </div>
</template>

<script setup>
const activeTab = ref(0)
const route = useRoute()
activeTab.value = route.query?.active * 1
</script>

<style scoped>
.active {
    background-color: cyan;
}
</style>

<template>
    <div>
        Current active tab: {{ activeTab }}
        <div>
            buttons:
        </div>
        <button :class="{ 'active': activeTab === 0 }">Button 0</button>
        <button :class="{ 'active': activeTab === 1 }">Button 1</button>
        <button :class="{ 'active': activeTab === 2 }">Button 2</button>
        <button :class="{ 'active': activeTab === 3 }">Button 3</button>
        <button :class="{ 'active': activeTab === 4 }">Button 4</button>
    </div>
</template>

<script setup>
const activeTab = ref(0)
const route = useRoute()
activeTab.value = route.query?.active * 1
</script>

<style scoped>
.active {
    background-color: cyan;
}
</style>

npm run generate
npm run preview

npm run generate
npm run preview

and localhost:3000?active=0 NOT WORKING

npm run dev

npm run dev

and localhost:3000?active=0 WORKING Why and how to fix that?

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

useRoute not working with static website?