Skip to content

嵌套路由

· 1 min

Nuxt 中采用的是文件路由系统来自动生成路由配置。所谓文件路由，一句话概括就是根据 pages 目录下的文件结构自动生成路由。这里的文件不仅仅是 vue 文件，还包括 js、jsx、ts、tsx 等文件类型。

pages/index.vue

<template>
  <h1>Index page</h1>
</template>

pages/index.ts

export default defineComponent({
  render() {
    return h('h1', 'Index page')
  },
})

pages/index.tsx

export default defineComponent({
  render() {
    return <h1>Index page</h1>
  },
})

嵌套路由

在 Nuxt 中，嵌套路由依然是根据 pages 目录下的文件结构来实现的。

嵌套路由的结构如下：

-| pages/
---| parent/
-----| child.vue
---| parent.vue

例如:

about.vue

<template>
  <NuxtLink to="/about">about index</NuxtLink>
  <NuxtLink to="/about/email">email</NuxtLink>
  <div>
    <NuxtPage />
  </div>
  <NuxtLink to="/">返回index</NuxtLink>
</template>

接下来在 pages 目录下创建和 about 同名的目录，然后创建如下的组件：

pages/about/index.vue

<template>
  <h1>about index page</h1>
  <p>this is about index page</p>
</template>

pages/about/email.vue

<template>
  <div>
    <h1>Email</h1>
    <p>Send me an email</p>
  </div>
</template>

其中 about 目录下的 index.vue 会成为进入子路由后的默认路由。

课堂练习

完成《用户管理系统》的“关于我们”页面

-EOF-