路由出口
<NuxtPage /> 是页面出口,相当于Vue中的 <router-view />,默认指向 /pages/index.vue
页面;例如:
<template>
<div>
<NuxtPage />
</div>
</template>
注:Nuxt3中组件只能有一个根元素;
路由跳转
用于跳转到指定页面,如下:
<NuxtLink to="/detail">点击我跳转到/detail页面</NuxtLink>
路由传参
可以在目录或页面名称中添加中括号参数,系统会自动匹配识别路由中的参数;如下:
访问路由: /user-admin/100
路由参数的配置和获取:
嵌套路由
目录和文件同名,就形成了路由嵌套;如下图:
访问:/parent/
,会加载名称为 index.vue
的子页面,因为 index
是默页面;
访问:/parent/child
,会加载名称为 child.vue
的子页面;