案例：Vue Router路由待办事项

学习完本章 Vue Router 路由管理的内容之后，对页面之间的跳转和切换就有了更加丰富的选择，还是在之前的待办事项系统案例的基础上，将待办事项面板和回收站面板抽象成两个页面，将原本采用 v-if 实现的切换替换为 Vue Router 来管理，并结合切换动画完善整个项目。

功能描述

主要功能和前面的待办事项系统功能一致，利用 Vue Router 实现页面切换，主要改造如下：

  • 将待办事项面板和回收站面板抽象成页面组件，配置到 router.js 中。

  • 改造 <navheader> 组件，使用<router-link> 替换原本的切换逻辑。

案例完整代码

新建 router.js，配置路由信息，代码如下：

import todo from '../views/todo.vue'                    // 待办事项页面
import recycle from '../views/recycle.vue'              // 回收站页面
import {createRouter,createWebHashHistory} from 'vue-router'
const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        { path: '/', redirect: '/todo' },                 // 配置默认路由，重定向到/todo
        { path: '/todo', component: todo },
        { path: '/recycle', component: recycle },
    ]
})
export default router

改造 App.vue 文件，添加 <router-view> 组件，并移除之前的 v-if 逻辑，代码如下：

<div class="container">
  <div class="app-content animated bounce">
    <navheader></navheader>
    <router-view v-slot="{ Component }">
        <transition enter-active-class="fadeIn animated faster" leave-active-class="fadeOut animated faster">
            <component :is="Component"></component>
        </transition>
    </router-view>

  </div>
</div>

最后，改造 <navheader> 组件，添加 <router-link>，代码如下：

<div class="nav-header">
    <!--active-class表示激活态的class名-->
    <router-link to="/todo" active-class="active">待办事项</router-link>|
    <router-link to="/recycle" active-class="active">回收站</router-link>
</div>

本案例完整源码：/案例源码/Vue Router路由管理。

小结与练习

本章讲解了 Vue Router 的相关知识，主要内容包括：单页应用的定义、Vue Router概述、动态路由、导航守卫、嵌套路由、命名视图、编程式导航、路由组件传参、路由重定向、路由别名、路由元信息、Vue Router 的路由模式、滚动行为、keep-alive、路由懒加载，内容涵盖了 Vue Router 的使用、底层原理等。

Vue Router 是 Vue.js 官方的路由管理器，它和 Vue.js 的核心深度集成，可以轻松实现页面之间或者组件之间的导航交互操作，通过路由来实现大型应用的页面跳转管理，令开发者可以轻松构建单页面应用。最后建议读者自行运行本章的各个示例代码，以加深对本章知识的理解。

下面来检验一下读者对本章内容的掌握程度。

  • 单页应用和多页应用的区别是什么？

  • Vue Router 中如何监听路由变化，有几种方式？

  • Vue Router 中有哪些路由模式，它们有什么区别？

  • Vue Router 中页面跳转时，如何传递参数？

  • Vue Router 中实现页面跳转时，如何保存页面的状态？