路由

路由出口

<NuxtPage /> 是頁面出口,相當(dāng)于Vue中的 <router-view />,默認(rèn)指向 /pages/index.vue 頁面;例如:

<template>
  <div>
    <NuxtPage />
  </div>
</template>

注:Nuxt3中組件只能有一個根元素;

路由跳轉(zhuǎn)

用于跳轉(zhuǎn)到指定頁面,如下:

<NuxtLink to="/detail">點擊我跳轉(zhuǎn)到/detail頁面</NuxtLink>
image

路由傳參

可以在目錄或頁面名稱中添加中括號參數(shù),系統(tǒng)會自動匹配識別路由中的參數(shù);如下:

訪問路由: /user-admin/100

路由參數(shù)的配置和獲?。?/p>

image

嵌套路由

目錄和文件同名,就形成了路由嵌套;如下圖:

image

訪問:/parent/,會加載名稱為 index.vue 的子頁面,因為 index 是默頁面;

訪問:/parent/child,會加載名稱為 child.vue 的子頁面;

官網(wǎng)

https://v3.nuxtjs.org/guide/directory-structure/pages

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容