配置 Vue Router
安装 Vue Router 并定义您的第一组路由
配置 Vue Router 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 1 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 3 节课。
什么是 Vue Router
Vue Router是 Vue 的官方路由库。
- 将网址映射到组件
- 无需完整重新加载页面即可实现单页面导航
- 管理历史记录、链接和参数
安装 Vue Router
使用 npm 将 Vue Router 添加到您的项目中。
# Install Vue Router 4 (for Vue 3)
npm install vue-router
# Or have it added during npm create vue@latest创建路由组件
每个路由都会渲染一个组件。请从简单的页面组件开始。
<!-- Home.vue -->
<template>
<h1>Home Page</h1>
</template>
<!-- About.vue -->
<template>
<h1>About Page</h1>
</template>定义 routes 数组
routes数组将路径映射到组件。
import Home from "./views/Home.vue"
import About from "./views/About.vue"
const routes = [
{ path: "/", component: Home },
{ path: "/about", component: About }
]createRouter
createRouter函数根据路由和历史记录模式创建路由器。
import { createRouter, createWebHistory } from "vue-router"
const router = createRouter({
history: createWebHistory(),
routes
})
export default routercreateWebHistory
createWebHistory使用 HTML5 历史记录 API，实现类似 /about 的简洁网址。
- 网址中没有哈希符号
- 需要配置服务器，才能使深层链接正常工作
- 另一种选择是 createWebHashHistory (/#/about)
注册路由器
使用 app.use 将路由器安装到 app 中。
import { createApp } from "vue"
import App from "./App.vue"
import router from "./router"
createApp(App)
.use(router)
.mount("#app")路由视图
路由视图组件是匹配的路由组件进行渲染的位置。
<!-- App.vue -->
<template>
<nav>...</nav>
<router-view></router-view>
</template>
<!-- The current page renders here -->路由链接
导航时请使用路由链接，而不要使用普通的锚点标签。这样可以避免完整重新加载页面。
<template>
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
</template>活动链接样式
路由链接会自动为活动链接添加 CSS 类。
- 部分匹配时使用 router-link-active
- 完全匹配时使用 router-link-exact-active
为这些类设置样式，即可突出显示当前页面。
整合应用
完整流程如下：
- 定义将路径映射到组件的路由
- 使用 createRouter 和 createWebHistory 创建路由器
- 使用 app.use(router) 注册路由器
- 放置路由视图，并使用路由链接进行导航
快速检查
测试您对 Vue Router 设置的理解。
回顾：设置 Vue Router
您已经设置好了客户端路由：
- 使用 npm install vue-router 安装
- 定义 routes数组
- 使用 createWebHistory 创建 createRouter
- 通过 app.use(router) 注册
- 使用 router-view 和 router-link
下一步：嵌套路由和动态路由。
常见问题解答
「配置 Vue Router」课时是免费的吗？
是的 — 「配置 Vue Router」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 3 节课。
「配置 Vue Router」这节课中我会学到什么？
安装 Vue Router 并定义您的第一组路由 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Vue Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 3 节。
「配置 Vue Router」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Vue Academy 课中编写并运行代码吗？
能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。