Frontend Academy · 课时

基于文件的路由与自动导入

Q: 「基于文件的路由与自动导入」这节课中我会学到什么？

在 pages/ 目录中创建页面以实现自动路由，理解动态片段，并依靠 Nuxt 的自动导入功能使用组件和可组合函数。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

在 pages/ 目录中创建页面以实现自动路由，理解动态片段，并依靠 Nuxt 的自动导入功能使用组件和可组合函数。

第 1 / 4 课14 个步骤

基于文件的路由与自动导入 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

Nuxt 3——Vue 的 SSR 框架

Nuxt 3 之于 Vue，就像 Next.js 之于 React：它是一个用于 SSR、SSG、基于文件的路由、数据获取和深度自动导入系统的约定型框架。

pages/ 目录

将 Vue 组件放入 pages/，它们就会成为路由——无需路由器配置。

pages/
  index.vue        // route: /
  about.vue        // route: /about
  blog/
    index.vue      // route: /blog
    [slug].vue     // route: /blog/:slug
  users/
    [id]/
      profile.vue  // route: /users/:id/profile

使用 [param] 创建动态路由

文件名中的方括号会创建动态片段。使用 useRoute() 访问参数。

<!-- pages/blog/[slug].vue -->
<script setup>
const route = useRoute();
const { data: post } = await useFetch(`/api/posts/${route.params.slug}`);
</script>

<template>
  <article>
    <h1>{{ post.title }}</h1>
    <div v-html="post.body" />
  </article>
</template>

全捕获路由

使用 [...slug].vue 创建全捕获路由——它会匹配该文件夹下的任意路径。

// pages/docs/[...slug].vue
// matches /docs/getting-started, /docs/api/auth, etc.

<script setup>
const route = useRoute();
console.log(route.params.slug); // ['api', 'auth']
</script>

布局

layouts/ 中的组件会包装页面。使用 definePageMeta 为每个页面设置当前布局。

<!-- layouts/dashboard.vue -->
<template>
  <div class="dashboard">
    <Sidebar />
    <main><slot /></main>
  </div>
</template>

<!-- pages/dashboard/index.vue -->
<script setup>
definePageMeta({ layout: 'dashboard' });
</script>

默认布局

layouts/default.vue 会应用于未指定布局的任何页面。

使用 NuxtLink 导航

使用 <NuxtLink> 进行客户端导航——Nuxt 会在鼠标悬停时预取链接页面。

<template>
  <nav>
    <NuxtLink to="/">Home</NuxtLink>
    <NuxtLink to="/blog">Blog</NuxtLink>
    <NuxtLink :to="`/users/${userId}`">Profile</NuxtLink>
  </nav>
</template>

编程式导航

在 setup 或事件处理程序中使用 navigateTo()。

<script setup>
async function onLogin() {
  await login(form);
  await navigateTo('/dashboard');
}
</script>

自动导入——组件

将组件放入 components/，即可在任意模板中使用它，而无需导入——Nuxt 会扫描并注册这些组件。

components/
  AppHeader.vue
  UserCard.vue

<!-- any page or component: -->
<template>
  <AppHeader />
  <UserCard :user="user" />
</template>

自动导入——组合式函数

composables/ 中的组合式函数会自动导入。

// composables/useCounter.ts
export const useCounter = () => {
  const count = ref(0);
  const increment = () => count.value++;
  return { count, increment };
};

<!-- any component: -->
<script setup>
const { count, increment } = useCounter(); // no import needed!
</script>

自动导入——工具函数

Vue 工具函数（ref、reactive、computed、watch 等）和 Nuxt 工具函数（useFetch、useState、navigateTo）会自动导入。

禁用自动导入

如果某个自动导入与其他内容冲突，您可以在 nuxt.config.ts 中禁用它。

export default defineNuxtConfig({
  imports: {
    autoImport: false // disable all auto-imports
  }
});

快速检查

如何在 Nuxt 3 中创建一个匹配 /docs/ 下任意路径的路由？

在交互式课程中回答

回顾：路由与自动导入

pages/ 文件夹会创建路由。[param] 用于动态路由，[...slug] 用于全捕获路由。layouts/ 中的布局通过 definePageMeta 选择。使用 NuxtLink 和 navigateTo 进行导航。组件、composables/、Vue 和 Nuxt 工具函数都会自动导入，无需手动导入。如有需要，可在 nuxt.config.ts 中禁用自动导入。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 41
课程: 163

免费开始学习查看完整课程

常见问题解答

「基于文件的路由与自动导入」课时是免费的吗？

是的 — 「基于文件的路由与自动导入」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「基于文件的路由与自动导入」这节课中我会学到什么？

在 pages/ 目录中创建页面以实现自动路由，理解动态片段，并依靠 Nuxt 的自动导入功能使用组件和可组合函数。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「基于文件的路由与自动导入」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy