Bagaimana untuk menukar parameter penghalaan penghala Nuxt.js tanpa memuat semula halaman?

Question

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 dalam pages/index.vue中找到的相同页面，我只是想能够读取$route.params.chapterNo和$route.params.sectionNo tanpa benar-benar mengubah hala ke halaman lain.

Saya mencapai ini sebahagiannya dengan mengedit nuxt.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 sebelumnya pages/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. <Nuxt>组件上使用keep-alive

Cuba 2:

Saya cuba menggunakan

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

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

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

? pages.index.vue

Answer 1

Untuk cache komponen yang diberikan, <Nuxt>组件上使用keep-alive dalam reka letak:

<Nuxt keep-alive />

Demo 1

Untuk cache halaman tertentu sahaja, gunakan keep-alive-props.include dan nama komponen (iaitu laluan ke halaman):

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

Demo 2

Answer 2

Acara baharu saya menggunakan <Nuxt keep-alive />查看Vue开发者工具时，注意到Nuxt为每个章节和部分创建了一个具有唯一键的pages/index.vue dalam fail reka letak lalai:

Ini memberi saya idea untuk memaksa menetapkan kunci tetap pada halaman dengan menggunakan <Nuxt nuxt-child-key="doNotReMount"/>.

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!