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.sectionNotanpa benar-benar mengubah hala ke halaman lain.
Saya mencapai ini sebahagiannya dengan mengeditnuxt.config.jsfail 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-alivedalam reka letak:Demo 1
Untuk cache halaman tertentu sahaja, gunakan
keep-alive-props.includedan nama komponen (iaitu laluan ke halaman):Demo 2
Acara baharu saya menggunakan
查看Vue开发者工具时,注意到Nuxt为每个章节和部分创建了一个具有唯一键的pages/index.vuedalam 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.vuehalaman hanya akan dipasang sekali, dan semua laluan seterusnya akan menggunakan contoh halaman yang sama!