Saya mempunyai aplikasi satu halaman menggunakan Nuxt.js (versi 2.15.7) yang perlu mendapatkan dua parameter daripada URL. Contohnya:
domain.com domain.com/chapter3 domain.com/chapter3/section5
Ketiga-tiga alamat hendaklah dipaparkan dalampages/index.vue
中找到的相同页面,我只是想能够读取$route.params.chapterNo
和$route.params.sectionNo
tanpa benar-benar mengubah hala ke halaman lain.
Saya mencapai ini sebahagiannya dengan mengeditnuxt.config.js
fail saya seperti ini:
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') }); } },
Satu-satunya masalah ialah ini memecahkan versi sebelumnyapages/index.vue
,并在每次路由到新的章节或部分时重新挂载一个新版本。每次路由更改时都会调用mounted()
, tetapi saya hanya memerlukan halaman untuk dipasang sekali. Ia akan menghidupkan pada perubahan alamat, tetapi dengan persediaan ini seluruh DOM dikosongkan dan dibina semula, menjadikannya mustahil untuk dianimasikan. Adakah terdapat sebarang konfigurasi penghalaan untuk mendapatkan hanya dua parameter ini tanpa memaparkan semula keseluruhan halaman?
Ralat semasa saya cuba memadam profil.component
属性,但这会导致页面未找到
tetapi ini hanya cache setiap halaman. Ia masih dipasang semula setiap kali laluan berubah.
组件上使用keep-alive
. Inilah percubaan saya, yang menghasilkan masalah yang sama:router-extras
模块,并使用定义多个参数选项,但每次路由更改时也会重新挂载pages/index.vue
Adakah terdapat cara untuk menukar laluan untuk mendapatkan parameter tanpa melekap semula{ path: '/chapter:chapterNo?/mission:missionNo?', }
?pages.index.vue
Untuk cache komponen yang diberikan,
组件上使用keep-alive
dalam reka letak:Demo 1
Untuk cache halaman tertentu sahaja, gunakan
keep-alive-props.include
dan nama komponen (iaitu laluan ke halaman):Demo 2
Acara baharu saya menggunakan
查看Vue开发者工具时,注意到Nuxt为每个章节和部分创建了一个具有唯一键的pages/index.vue
dalam fail reka letak lalai:Ini memberi saya idea untuk memaksa menetapkan kunci tetap pada halaman dengan menggunakan
.Kini, kunci tidak akan dikemas kini dengan setiap laluan baharu,
pages/index.vue
halaman hanya akan dipasang sekali, dan semua laluan seterusnya akan menggunakan contoh halaman yang sama!