Vue Router 源码之旅四：携手全局组件 router-link 和 router-view 畅游路由世界

2023-11-15 04:54:03

Vue Router 全局组件指南：router-link 和 router-view

在单页面应用的舞台上起舞

Vue Router 是一个强大的工具，它允许我们在单页面应用中轻松实现路由。在之前的教程中，我们探讨了路由的基本原理和一些关键概念。今天，我们将深入研究两个至关重要的全局组件：router-link 和 router-view 。这两个组件携手合作，为我们的应用提供无缝的导航体验。

router-link：通往路由世界的门户

定义与作用

router-link 组件就像是一扇通往路由世界的门户。它是一个全局组件，允许我们在应用程序中定义可点击的链接，当用户单击这些链接时，它会触发导航到指定目标路由。

基本用法

使用 router-link 组件非常简单。只需在要跳转到的元素上添加 router-link 属性，并指定其值。值可以是字符串（例如，/about）或对象（例如，{ name: 'about' }）。字符串表示目标路由的路径，而对象可以指定更详细的路由信息，例如，路由名称或参数。

<!-- 跳转到 /about 路由 -->
<router-link to="/about">关于我们</router-link>

<!-- 使用名称跳转到路由 -->
<router-link :to="{ name: 'about' }">关于我们</router-link>

传递参数

我们还可以使用 router-link 组件传递参数。参数可以是静态值或动态值。静态值直接写在 router-link 的 to 属性中，而动态值需要使用 v-bind 指令绑定。

<!-- 使用静态参数传递 id -->
<router-link to="/profile/123">我的个人资料</router-link>

<!-- 使用动态参数传递 id -->
<router-link :to="`/profile/${userId}`">我的个人资料</router-link>

router-view：展示路由内容的舞台

定义与作用

router-view 组件是 Vue Router 的另一个全局组件，它用于显示路由的内容。当路由发生变化时，router-view 会自动更新其内容，以匹配新的路由。

基本用法

使用 router-view 组件同样简单。只需在需要显示路由内容的元素中添加 router-view 标签即可。router-view 组件会根据当前的路由，自动渲染对应的组件内容。

<!-- 显示当前路由组件的内容 -->
<router-view></router-view>

嵌套路由

router-view 组件还支持嵌套路由。这意味着可以在一个 router-view 组件中再嵌套另一个 router-view 组件。这样就可以实现更加复杂的路由结构。

<!-- 嵌套路由示例 -->
<router-view>
  <router-view></router-view>
</router-view>

应用示例：一个简单的待办事项应用

为了更好地理解 router-link 和 router-view 组件的实际应用，让我们构建一个简单的待办事项应用。这个应用将包含两个页面：一个用于显示所有待办事项的页面，另一个用于添加新的待办事项。

项目结构

|-- src
|   |-- App.vue
|   |-- components
|   |   |-- TodoList.vue
|   |   |-- TodoItem.vue
|   |-- router
|   |   |-- index.js
|-- index.html

代码示例

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

TodoList.vue

<template>
  <div>
    <h1>待办事项列表</h1>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: [
        { id: 1, text: '学习 Vue Router' },
        { id: 2, text: '构建待办事项列表应用' },
        { id: 3, text: '撰写博客文章' }
      ]
    }
  }
}
</script>

TodoItem.vue

<template>
  <li>
    {{ todo.text }}
  </li>
</template>

<script>
export default {
  props: ['todo']
}
</script>

index.js（路由）

import Vue from 'vue'
import VueRouter from 'vue-router'
import TodoList from './components/TodoList.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: TodoList
    }
  ]
})

export default router

index.html

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id="app"></div>
    <script src="dist/build.js"></script>
  </body>
</html>

现在，运行这个应用，你就可以看到一个简单的待办事项列表了。点击列表中的任何一项，你就可以看到该待办事项的详细信息。

常见问题解答

1. 如何在 router-link 中传递查询参数？

你可以通过在 to 属性中添加查询字符串来传递查询参数。例如：

<router-link :to="{ path: '/search', query: { q: 'vue router' } }">搜索</router-link>

2. 如何在 router-view 中使用守卫？

你可以使用 beforeEnter 和 beforeLeave 守卫来控制路由的导航。这些守卫是全局的，可以在 router.beforeEach 和 router.beforeEach 方法中定义。

3. 如何在 router-view 中使用过渡效果？

你可以通过在 router-view 标签上添加 transition 属性来使用过渡效果。例如：

<router-view transition="fade"></router-view>

4. 如何使用 router-link 实现激活状态？

你可以通过使用 active-class 属性在 router-link 组件上设置激活状态的 CSS 类。例如：

<router-link :to="'/about'" active-class="active">关于我们</router-link>

5. 如何在嵌套路由中传递参数？

在嵌套路由中传递参数与在非嵌套路由中传递参数相同。你可以在父级路由的 to 属性中传递参数，然后在子级路由中使用 props 选项接收这些参数。

总结

恭喜你！你已经成功掌握了 Vue Router 中两个最重要的全局组件：router-link 和 router-view 。现在，你可以轻松构建单页面应用，实现页面的无缝切换。希望这些文章能够帮助你更好地理解 Vue Router 的原理和用法。如果你有任何问题或建议，欢迎在评论区留言。