Comment modifier les paramètres de routage du routeur Nuxt.js sans actualiser la page ?
P粉131455722
P粉131455722 2023-11-05 14:05:53
0
2
507

J'ai une application d'une seule page utilisant Nuxt.js (version 2.15.7) qui doit obtenir deux paramètres de l'URL. Par exemple :

domain.com domain.com/chapter3 domain.com/chapter3/section5

Les trois adresses doivent être affichées danspages/index.vue中找到的相同页面,我只是想能够读取$route.params.chapterNo$route.params.sectionNosans réellement rediriger vers une autre page.

J'y suis parvenu partiellement en éditant monnuxt.config.jsfichier comme ceci :

router: { extendRoutes(routes, resolve) { routes.push({ name: 'chapter', path: '/chapter:chapterNo?', component: resolve(__dirname, 'pages/index.vue') }); routes.push({ name: 'section', path: '/chapter:chapterNo?/section:sectionNo?', component: resolve(__dirname, 'pages/index.vue') }); } },

Le seul problème est que cela casse la version précédentepages/index.vue,并在每次路由到新的章节或部分时重新挂载一个新版本。每次路由更改时都会调用mounted(), mais je n'ai besoin que d'un montage de la page une seule fois. Il s'animera lors des changements d'adresse, mais avec cette configuration, l'intégralité du DOM est effacée et reconstruite, ce qui rend impossible l'animation. Existe-t-il une configuration de routage pour obtenir uniquement ces deux paramètres sans restituer la page entière ?

Erreur lorsque j'essaie de supprimer le profil.component属性,但这会导致页面未找到

Essayez 1 :

J'ai essayé en root

mais cela ne met en cache que chaque page. Il remonte toujours à chaque changement d'itinéraire.组件上使用keep-alive

Essayez 2 :

J'ai essayé d'utiliser

. Voici ma tentative, qui a produit le même problème :router-extras模块,并使用定义多个参数选项,但每次路由更改时也会重新挂载pages/index.vue

 { path: '/chapter:chapterNo?/mission:missionNo?', } 

Y a-t-il un moyen de modifier l'itinéraire pour obtenir des paramètres sans remonter

?pages.index.vue

P粉131455722
P粉131455722

répondre à tous (2)
P粉550823577

Pour mettre en cache un composant rendu,组件上使用keep-alivedans la mise en page :

Démo 1

Pour mettre en cache uniquement une page spécifique, utilisezkeep-alive-props.includeet le nom du composant (c'est-à-dire le chemin d'accès à la page) :

Démo 2

    P粉518799557

    Ma nouvelle instance d'utilisation de查看Vue开发者工具时,注意到Nuxt为每个章节和部分创建了一个具有唯一键的pages/index.vuedans le fichier de mise en page par défaut :

    Cela m'a donné une idée pour forcer l'attribution d'une clé constante à la page en utilisant.

    Maintenant, la clé ne sera pas mise à jour à chaque nouvelle route,pages/index.vuela page ne sera montée qu'une seule fois, et toutes les routes suivantes utiliseront la même instance de page !

      Derniers téléchargements
      Plus>
      effets Web
      Code source du site Web
      Matériel du site Web
      Modèle frontal
      À propos de nous Clause de non-responsabilité Sitemap
      Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!