Comment modifier les paramètres de routage du routeur Nuxt.js sans actualiser la page ?

Question

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 dans pages/index.vue中找到的相同页面，我只是想能够读取$route.params.chapterNo和$route.params.sectionNo sans réellement rediriger vers une autre page.

J'y suis parvenu partiellement en éditant mon nuxt.config.js fichier 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édente pages/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. <Nuxt>组件上使用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

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

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

? pages.index.vue

Answer 1

Pour mettre en cache un composant rendu, <Nuxt>组件上使用keep-alive dans la mise en page :

<Nuxt keep-alive />

Démo 1

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

<Nuxt keep-alive
      :keep-alive-props="{ include: 'pages/index.vue' }"
/>

Démo 2

Answer 2

Ma nouvelle instance d'utilisation de <Nuxt keep-alive />查看Vue开发者工具时，注意到Nuxt为每个章节和部分创建了一个具有唯一键的pages/index.vue dans 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 <Nuxt nuxt-child-key="doNotReMount"/>.

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 !