English 中文(简体)
当 URL 更改时避免在 Nuxt 中重新装入页面
原标题:Avoid the reload of a page in Nuxt when url changes
I m currently migrating an application to Nuxt3 and I m having an issue with the reloading of a page when the URL changes. I have several links which all use the same page. To make this work I had to add the following to the nuxt.config.ts file: hooks: { "pages:extend"(pages) { pages.push( { name: "authentication-login", path: "/auth/login", file: resolve(__dirname, "pages/authentication.vue"), }, { name: "authentication-register", path: "/auth/register", file: resolve(__dirname, "pages/authentication.vue"), }, { name: "forgot-password", path: "/auth/forgot-password", file: resolve(__dirname, "pages/authentication.vue"), } ); }, }, And in order to navigate between routes I m using NuxtLink on the pages/authentication.vue page:
{{ $t(`authentication.login`) }}
{{ $t(`authentication.register`) }}
This works as expected and the same component is used when I m navigating from one URL to another. The issue I m having is that I m trying to add a CSS transition between the 2 texts. It bugged me for 1 hour to figure out why this wasn t working. I discovered that Nuxt remounts the page component when the URL is changed thus the transition never occurs since the page is reloaded. What I wondered is if anyone knows of a way I can force Nuxt to not reload the page and basically keep the same component alive while navigating from one route to another.
问题回答
I ve managed to figure out an answer to this, in order to prevent the component from being re-mounted i ve added a static key to the page like so: definePageMeta({ key: "authentication", });




相关问题
Nuxt 3 useRoute import cannot find

I am using latest nuxt version and when I tried to use the useRoute method is triggers a "Cannot Find name useRoute" but it works so I would like to know what could I be missing My package ...

Vue array dependent select not display data

I have dependent selection like this. Selection image when i console log, they have data but not render data in selection data This is what i ve tried. for Product selection has default selected value ...

How to inject Bearer Token in Axios boot file

Quasar has a different setup using boot files and my current axios.ts looks liek this: import { boot } from quasar/wrappers ; import axios, { AxiosInstance } from axios ; declare module @vue/...

Vue router and Vite Base url conflict

I use Vue Router to develop my single page application and use Vite to package my project. I want to deploy all static files (such as index.js and index.css) under another CDN domain name (cdn.example....

Vue.js change class on mounted

I have a button element with a .hover property and I need the hover animation to also happen as soon as the page is mounted. How can I attribute a class to a button on the mounted function and then ...

Laravel +Vuejs CORS issue

I am facing a dilemma wit the CORS issue. I have application that is configured as follow: API: https://abc.mydomain.com (laravel) front end: https://subdomain.mydomain.com(VueJS) Both applications ...

热门标签