Nuxt 学习

约 657 字大约 2 分钟

2026-01-11

初始化

npx nuxi init

<NuxtPage /> 只是一个“把当前路由对应页面渲染出来”的占位符，本质上是 框架帮你把路由表自动生成了

可以把它理解成 Nuxt 的两件事配合起来：

基于 pages/ 目录的自动路由（file-based routing）

<NuxtPage /> = 路由出口（类似 Vue Router 的 <router-view />）

pages/ 目录，Nuxt 自动生成路由

pages/
  index.vue
  about.vue
  users/
    index.vue
    [id].vue

Nuxt 会自动变成类似这样的路由（概念上）：

你根本不需要手写 routes: [...]。

你把组件放进 components/ 目录后，Nuxt 会在开发/构建时扫描这个目录，自动帮你做两件事：

最常见规则

假设你有：

components/
  Hello.vue
  BaseButton.vue
  user/
    Avatar.vue

在页面/组件里你可以直接写：

<template>
  <Hello />
  <BaseButton />
  <UserAvatar />
</template>

命名规则小结

（Nuxt 会把路径结构“拼”进组件名里，避免重名。）

模板里建议用 PascalCase（<BaseButton />）最稳。

有些情况下 <base-button> 也能工作，但别混着来，尤其在 TS/自动提示上会有坑。

默认只扫 components/（以及配置里加的目录）。

如果你把组件丢到 src/ui/ 这种地方，就不会自动导入（除非你配置）。

nuxt 3 的路由基于 vue-router，并且通过文件目录结构来自动生成，可以在 pages/ 目录下创建一个文件来定义一个路由

使用 [dynamic] 来定义动态路由，如果是可选参数可以使用 [[dynamic]]

在 pages/ 目录下创建一个 users-[group] 文件夹，在其内部再创建一个 [id].vue 文件，重启 nuxt ，例如访问 http://localhost:3000/users-admin/1

在页面中可以使用 const route = useRoute() 获取路由参数，比如 route.params.id 或 route.params.group

当使用嵌套路由的时候，比如 pages/parents/child.vue，无法直接访问这个路径下的文件，需要创建一个pages/parents.vue 文件并在其中插入一个<NuxtPage />

可以使用<NuxtLink to="/about">关于</NuxtLink> 进行页面跳转

编程式导航：

const router = useRouter()
const toAbout = ()=>{
    router.push({
        path:'/about'
        query:userInfo		// 传参
    })
}

在对应的页面使用 route.query 获取

也可以直接在 template 中使用：

<NuxtLink :to="{ path: 'about', query: userInfo }">用户</NuxtLink>

版权归属：yumengjh