Nuxt3从入门到实战之约定路由

前言

上一讲写了最小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/'}子路由

image.png

解决方法也很简单，在parent/目录下加一个index.vue即可。

原理

动态路由的原理可以简单在.nuxt目录中一探究竟