Nuxt.js路由基础 #

一、文件系统路由概述 #

Nuxt.js 使用文件系统路由，根据 pages/ 目录的文件结构自动生成路由配置。这种方式无需手动配置路由，大大简化了开发流程。

1.1 基本原理 #

每个 .vue 文件都会自动注册为一个路由：

text

pages/
├── index.vue        → /
├── about.vue        → /about
├── contact.vue      → /contact
└── blog/
    ├── index.vue    → /blog
    └── post.vue     → /blog/post

1.2 路由生成规则 #

文件路径	生成的路由
`pages/index.vue`	`/`
`pages/about.vue`	`/about`
`pages/blog/index.vue`	`/blog`
`pages/blog/article.vue`	`/blog/article`

二、页面创建 #

2.1 创建首页 #

创建 pages/index.vue：

vue

<template>
  <div>
    <h1>首页</h1>
    <p>欢迎来到我的网站</p>
  </div>
</template>

<script setup lang="ts">
</script>

2.2 创建普通页面 #

创建 pages/about.vue：

vue

<template>
  <div>
    <h1>关于我们</h1>
    <p>这是关于页面</p>
  </div>
</template>

<script setup lang="ts">
</script>

2.3 创建嵌套页面 #

创建 pages/blog/index.vue：

vue

<template>
  <div>
    <h1>博客列表</h1>
  </div>
</template>

<script setup lang="ts">
</script>

三、页面导航 #

3.1 NuxtLink组件 #

<NuxtLink> 是 Nuxt.js 提供的导航组件，用于页面间导航：

vue

<template>
  <nav>
    <NuxtLink to="/">首页</NuxtLink>
    <NuxtLink to="/about">关于</NuxtLink>
    <NuxtLink to="/blog">博客</NuxtLink>
  </nav>
</template>

3.2 NuxtLink属性 #

vue

<template>
  <NuxtLink
    to="/about"
    active-class="text-blue-500"
    exact-active-class="font-bold"
    prefetch
    no-prefetch
    target="_blank"
    rel="noopener"
  >
    关于我们
  </NuxtLink>
</template>

属性	说明
`to`	目标路径
`active-class`	激活时的 CSS 类
`exact-active-class`	精确匹配时的 CSS 类
`prefetch`	预加载目标页面
`no-prefetch`	禁用预加载
`target`	链接目标
`rel`	链接关系

3.3 编程式导航 #

使用 navigateTo 函数进行编程式导航：

vue

<script setup lang="ts">
const router = useRouter()

const goToAbout = () => {
  navigateTo('/about')
}

const goToBlog = (id: number) => {
  navigateTo(`/blog/${id}`)
}

const goToExternal = () => {
  navigateTo('https://nuxt.com', {
    external: true,
    open: {
      target: '_blank'
    }
  })
}
</script>

<template>
  <button @click="goToAbout">跳转到关于页</button>
  <button @click="goToBlog(1)">查看文章</button>
</template>

3.4 useRouter和useRoute #

vue

<script setup lang="ts">
const router = useRouter()
const route = useRoute()

console.log(route.path)
console.log(route.params)
console.log(route.query)
console.log(route.hash)

router.push('/about')
router.back()
router.forward()
router.go(-1)
</script>

四、路由参数 #

4.1 查询参数 #

vue

<template>
  <NuxtLink :to="{ path: '/search', query: { q: 'nuxt' } }">
    搜索 Nuxt
  </NuxtLink>
</template>

获取查询参数：

vue

<script setup lang="ts">
const route = useRoute()
const query = route.query.q
</script>

4.2 Hash参数 #

vue

<template>
  <NuxtLink to="/about#team">团队介绍</NuxtLink>
</template>

获取 Hash：

vue

<script setup lang="ts">
const route = useRoute()
const hash = route.hash
</script>

五、页面元信息 #

5.1 definePageMeta #

使用 definePageMeta 定义页面级别的元信息：

vue

<script setup lang="ts">
definePageMeta({
  layout: 'custom',
  middleware: ['auth'],
  keepalive: true,
  name: 'user-profile',
  key: route => route.fullPath,
  pageTransition: {
    name: 'slide',
    mode: 'out-in'
  }
})
</script>

5.2 常用配置项 #

配置项	说明
`layout`	指定布局名称
`middleware`	路由中间件
`keepalive`	保持组件状态
`name`	路由名称
`key`	组件 key
`pageTransition`	页面过渡动画
`redirect`	重定向

5.3 重定向 #

vue

<script setup lang="ts">
definePageMeta({
  redirect: '/dashboard'
})
</script>

六、页面过渡动画 #

6.1 全局过渡 #

在 app.vue 中配置：

vue

<template>
  <NuxtLayout>
    <NuxtPage :transition="{
      name: 'page',
      mode: 'out-in'
    }" />
  </NuxtLayout>
</template>

<style>
.page-enter-active,
.page-leave-active {
  transition: opacity 0.3s ease;
}

.page-enter-from,
.page-leave-to {
  opacity: 0;
}
</style>

6.2 页面级过渡 #

vue

<script setup lang="ts">
definePageMeta({
  pageTransition: {
    name: 'slide',
    mode: 'out-in'
  }
})
</script>

<style>
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.3s ease;
}

.slide-enter-from {
  transform: translateX(100%);
}

.slide-leave-to {
  transform: translateX(-100%);
}
</style>

七、路由验证 #

7.1 definePageMeta验证 #

vue

<script setup lang="ts">
definePageMeta({
  validate: async (route) => {
    const id = route.params.id
    return /^\d+$/.test(id as string)
  }
})
</script>

验证失败时会显示 404 页面。

7.2 自定义验证逻辑 #

vue

<script setup lang="ts">
definePageMeta({
  validate: async (route) => {
    const slug = route.params.slug as string
    const validSlugs = ['about', 'contact', 'privacy']
    return validSlugs.includes(slug)
  }
})
</script>

八、路由组 #

8.1 创建路由组 #

使用括号创建路由组，不影响 URL 结构：

text

pages/
├── (marketing)/
│   ├── index.vue       → /
│   ├── about.vue       → /about
│   └── contact.vue     → /contact
└── (dashboard)/
    ├── dashboard.vue   → /dashboard
    └── settings.vue    → /settings

8.2 路由组的作用 #

组织代码结构
共享布局
应用中间件到一组路由

text

pages/
├── (auth)/
│   ├── login.vue
│   └── register.vue
└── (admin)/
    ├── admin.vue
    └── users.vue

九、嵌套路由 #

9.1 创建嵌套路由 #

使用同名目录和文件创建嵌套路由：

text

pages/
├── parent/
│   ├── child.vue       → /parent/child
│   └── another.vue     → /parent/another
└── parent.vue          → /parent (包含 <NuxtPage />)

pages/parent.vue：

vue

<template>
  <div>
    <h1>父页面</h1>
    <nav>
      <NuxtLink to="/parent/child">子页面1</NuxtLink>
      <NuxtLink to="/parent/another">子页面2</NuxtLink>
    </nav>
    <NuxtPage />
  </div>
</template>

9.2 嵌套布局 #

text

pages/
├── users/
│   ├── [id].vue        → /users/:id
│   └── index.vue       → /users
└── users.vue           → /users (包含 <NuxtPage />)

十、路由配置 #

10.1 查看生成的路由 #

在开发模式下，可以通过 DevTools 查看生成的路由配置。

10.2 路由选项 #

在 nuxt.config.ts 中配置路由选项：

typescript

export default defineNuxtConfig({
  router: {
    options: {
      strict: true
    }
  }
})

十一、总结 #

本章介绍了 Nuxt.js 路由的基础知识：

文件系统路由自动生成
使用 <NuxtLink> 进行页面导航
使用 navigateTo 进行编程式导航
使用 definePageMeta 配置页面元信息
路由组组织代码结构
嵌套路由实现复杂布局

掌握路由是开发 Nuxt.js 应用的基础，下一章我们将学习动态路由和参数处理。