0Pricing
Vue Academy · 课时

嵌套路由与动态路由

构建嵌套布局，并使用动态路由参数

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

超越静态路由

实际应用需要能够携带数据并嵌套在布局中的路由。

  • 动态片段可以捕获类似 id 的值
  • 嵌套路由可以在父组件内部渲染子路由
  • 命名路由和编程式导航带来更大的灵活性

动态路由片段

冒号定义了一个可以匹配任意值的动态片段。

const routes = [
  { path: "/user/:id", component: UserProfile }
]

// Matches /user/1, /user/42, /user/abc

访问 route.params

通过 route.params读取捕获的值。

<script setup>
import { useRoute } from "vue-router"

const route = useRoute()
console.log(route.params.id)
</script>

响应参数变化

当只有参数发生变化时（例如从 /user/1 变为 /user/2），组件会被复用。请侦听参数以重新加载数据。

import { watch } from "vue"
import { useRoute } from "vue-router"

const route = useRoute()
watch(() => route.params.id, (newId) => {
  loadUser(newId)
})

多个动态片段

路由可以包含多个动态部分。

const routes = [
  { path: "/user/:userId/post/:postId", component: Post }
]

// route.params.userId and route.params.postId

嵌套路由

嵌套路由允许子路由在父组件内部渲染。

const routes = [
  {
    path: "/user/:id",
    component: UserLayout,
    children: [
      { path: "profile", component: Profile },
      { path: "posts", component: Posts }
    ]
  }
]

嵌套路由视图

父组件需要拥有自己的路由视图，以便渲染子路由。

<!-- UserLayout.vue -->
<template>
  <h1>User</h1>
  <router-view></router-view>
</template>

<!-- /user/1/profile renders Profile here -->

命名路由

为路由指定名称，这样无需将路径硬编码即可引用它。

const routes = [
  {
    path: "/user/:id",
    name: "user",
    component: UserProfile
  }
]

按名称链接

路由链接可以指向命名路由，并以对象形式传递参数。

<router-link
  :to="{ name: 'user', params: { id: 42 } }"
>
  View User
</router-link>

编程式导航

使用路由器的 push 方法从 JavaScript 进行导航。

import { useRouter } from "vue-router"

const router = useRouter()

function goToUser(id) {
  router.push({ name: "user", params: { id } })
}

其他导航方法

路由器还提供了更多导航辅助方法：

  • router.push添加新的历史记录
  • router.replace在不添加新历史记录的情况下进行导航
  • router.back返回上一页

快速检查

测试您对动态路由和嵌套路由的理解。

回顾：嵌套路由和动态路由

您已经学会了高级路由功能：

  • 动态片段（/user/:id）会被捕获到 route.params 中
  • 通过 children 和嵌套路由视图实现嵌套路由
  • 命名路由支持按名称建立链接
  • router.push用于编程式导航

下一步：导航守卫。

常见问题解答

「嵌套路由与动态路由」课时是免费的吗？

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

「嵌套路由与动态路由」这节课中我会学到什么？

构建嵌套布局，并使用动态路由参数 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

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

「嵌套路由与动态路由」课时需要多长时间？

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

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

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

此课程中的所有课时

  1. 配置 Vue Router
  2. 嵌套路由与动态路由
  3. 导航守卫
← 返回 Vue Academy