【Nuxt3从入门到实战】第二啪：约定路由用起来可真爽啊！

前言

大家好，我是村长，欢迎关注我的公众号村长学前端。最近在与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​​目录中一探究竟

下次预告

有时候需要在不同页面间共用模板页：这就要用到模板功能，下次将带大家一起看看怎么做到这一点。