Nuxt 学习
约 657 字大约 2 分钟
2026-01-11
初始化
npx nuxi initNuxtPage
<NuxtPage /> 只是一个“把当前路由对应页面渲染出来”的占位符，本质上是 框架帮你把路由表自动生成了
可以把它理解成 Nuxt 的两件事配合起来：
基于 pages/ 目录的自动路由（file-based routing）
<NuxtPage /> = 路由出口（类似 Vue Router 的 <router-view />）
pages/ 目录，Nuxt 自动生成路由
pages/
index.vue
about.vue
users/
index.vue
[id].vueNuxt 会自动变成类似这样的路由（概念上）：
/→pages/index.vue/about→pages/about.vue/users→pages/users/index.vue/users/:id→pages/users/[id].vue
你根本不需要手写 routes: [...]。
components 自动导入
你把组件放进 components/ 目录后，Nuxt 会在开发/构建时扫描这个目录，自动帮你做两件事：
- 自动注册组件（所以你在别的组件里不用
import/components:{}） - 按需引入（通常会做 tree-shaking/按需打包，不是把所有组件一股脑全塞进去）
最常见规则
假设你有：
components/
Hello.vue
BaseButton.vue
user/
Avatar.vue在页面/组件里你可以直接写：
<template>
<Hello />
<BaseButton />
<UserAvatar />
</template>命名规则小结
- 文件名
Hello.vue→ 组件名<Hello /> - 子目录会变成前缀：
user/Avatar.vue→<UserAvatar /> - 多词文件名会转成 PascalCase：
base-button.vue→<BaseButton />
（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>