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>