上一篇我们讲到如何利用nuxt3的约定路由，实现页面的基本路由功能。但是对于复杂的页面而言，基本的路由是远远不够的。接下来我们来看看nuxt的复杂路由。
嵌套路由
我们知vue-router中要想使用嵌套路由就提供一个子页面的容器，这个容器就是<RouterView/>，而nuxt3对其重新定义了一个语义别名<NuxtChild/>来替代<RouterView/>，用法都是一样的。
在pages下新建一个文件夹parent和一个与文件名同名的.vue文件，在parent文件夹内新建child1.vue、child2.vue文件作为子页面。
- 目录结构如下：
pages/
| ——parent/
| | ——child1.vue
| | ——child2.vue
| ——parent.vue
- 新增两个子页面
child1.vue和child2.vue
<template>
<h1>这是子组件页面1</h1>
</template>
<template>
<h1>这是子组件页面2</h1>
</template>
- 给父页面
parent.vue加一个<NuxtChild/>用于显示子页面，并加上两个导航链接<NuxtLink/>用于切换两个子页面
<template>
<div>
<NuxtLink to="/parent/child1">child1</NuxtLink> |
<NuxtLink to="/parent/child2">child2</NuxtLink>
<h1>这里是 父组件页面</h1>
<NuxtChild />
</div>
</template>
- 在
app.vue添加一个导航链接到parent.vue
<template>
<div>
<NuxtLink to="/test">test</NuxtLink> |
<NuxtLink to="/">根</NuxtLink>
<!-- 新增 -->
<NuxtLink to="/parent">嵌套路由页面</NuxtLink>
<NuxtPage></NuxtPage>
</div>
</template>
- 运行如下：
动态路由
- 对于动态路由，在nuxt3中你只需要将动态参数写在
[]中即可，而这个[]应该写文件夹名或者.vue文件名中。
| 文件名 | 访问路径 | 参数 |
|---|---|---|
| /parent-[user].vue | /parent-小明 | {user:'小明'} |
| /parent-[user]/[id].vue | /parent-小明/1 | {user:'小明',id:1} |
- 接下来我哦们在嵌套路由的基础上进行改造，将parent文件夹名和parent.vue文件名改成parent-[user]。对应的目录结构如下：
pages/
| ——parent-[user]/
| | ——[id].vue
| ——parent-[user].vue
[id].vue页面中参数的获取（通过$router.params）
<template>
<div>user: {{ $route.params.user }} id: {{ $route.params.id }}</div>
</template>
- 访问路径
/parent-小明/12即可访问[id].vue文件
结语
关于动态路由和嵌套路由到这里就结束了，我相信大家应该知道怎么去开发路由页了，下一篇我们将一起探讨怎样在nuxt3中搭建页面布局。
