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.sectionNo
sans réellement rediriger vers une autre page.
J'y suis parvenu partiellement en éditant monnuxt.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é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
属性,但这会导致页面未找到
mais cela ne met en cache que chaque page. Il remonte toujours à chaque changement d'itinéraire.
组件上使用keep-alive
. Voici ma tentative, qui a produit le même problème :router-extras
模块,并使用定义多个参数选项,但每次路由更改时也会重新挂载pages/index.vue
Y a-t-il un moyen de modifier l'itinéraire pour obtenir des paramètres sans remonter{ path: '/chapter:chapterNo?/mission:missionNo?', }
?pages.index.vue
Pour mettre en cache un composant rendu,
组件上使用keep-alive
dans la mise en page :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) :Démo 2
Ma nouvelle instance d'utilisation de
查看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
.Maintenant, la clé ne sera pas mise à jour à chaque nouvelle route,
pages/index.vue
la page ne sera montée qu'une seule fois, et toutes les routes suivantes utiliseront la même instance de page !