前言
大家好，我是村长，欢迎关注我的公众号村长学前端。最近在与DevUI团队一起做直播，给大家分享Vue DevUI开源组件库的建设，欢迎大家关注我的B站Young村长！
上一讲写了最小nuxt3应用，我们试用了一下多页面写法，关于是否引入vue-router，nuxt3的行为是：如果只有app.vue不创建pages目录，将不会引入vue-router，则打包体积更小，反之则引入路由库，相当智能吧！
页面路径
nuxt3会自动整合vue-router，并且映射pages/目录到应用的routes配置中。就像上一讲演示的index.vue和detail.vue，它们在最终生成的路由配置表中大概是下面这样：
[
{
path: '/',
component: '~/pages/index.vue',
name: 'index',
},
{
path: '/detail',
component: '~/pages/detail.vue',
name: 'detail',
}
]
动态路由
如果我们在文件名或者文件夹名称里面包含了方括号，它们将被转换为动态路由参数。
比如下面这样的文件结构：
-| pages/
---| users-[group]/
-----| [id].vue
上面案例我们可以在组件[id].vue中访问group、id这两个参数:
<template>
{{ $route.params.group }}
{{ $route.params.id }}
</template>
通过 /users-admins/123 导航即可:
<NuxtLink to="/users-admins/123">管理员123</NuxtLink>
嵌套路由
目录和文件同名，就制造了嵌套路由。
比如下面目录结构：
-| pages/
---| parent/
------| child.vue
---| parent.vue
child.vue
<template>
<div>
<h1>child page</h1>
</div>
</template>
父组件中使用NuxtChild组件显示嵌套子组件内容，parent.vue：
<template>
<div>
<h1>parent page</h1>
<!-- 子组件出口 -->
<NuxtChild></NuxtChild>
</div>
</template>
试一下，index.vue
<NuxtLink to="/parent/child">Parent</NuxtLink>
产生的路由会像下面这样：
{
path: '/parent',
children: [
{
path: 'child'
}
]
}那如果只使用/parent会怎么样？发现内容没有了，显然需要一个{path: '/parent/'}子路由
解决方法也很简单，在parent/目录下加一个index.vue即可。
原理
动态路由的原理可以简单在.nuxt目录中一探究竟
下次预告
有时候需要在不同页面间共用模板页：这就要用到模板功能，下次将带大家一起看看怎么做到这一点。
