Bagaimana untuk menukar parameter penghalaan penghala Nuxt.js tanpa memuat semula halaman?
P粉131455722
P粉131455722 2023-11-05 14:05:53
0
2
511

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属性,但这会导致页面未找到

Cuba 1:

Saya cuba di root

tetapi ini hanya cache setiap halaman. Ia masih dipasang semula setiap kali laluan berubah.组件上使用keep-alive

Cuba 2:

Saya cuba menggunakan

. Inilah percubaan saya, yang menghasilkan masalah yang sama:router-extras模块,并使用定义多个参数选项,但每次路由更改时也会重新挂载pages/index.vue

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

Adakah terdapat cara untuk menukar laluan untuk mendapatkan parameter tanpa melekap semula

?pages.index.vue

P粉131455722
P粉131455722

membalas semua (2)
P粉550823577

Untuk cache komponen yang diberikan,组件上使用keep-alivedalam reka letak:

Demo 1

Untuk cache halaman tertentu sahaja, gunakankeep-alive-props.includedan nama komponen (iaitu laluan ke halaman):

Demo 2

    P粉518799557

    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!

      Muat turun terkini
      Lagi>
      kesan web
      Kod sumber laman web
      Bahan laman web
      Templat hujung hadapan
      Tentang kita Penafian Sitemap
      Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!