Vue Router 进阶—过渡动效&数据获取

大家好，我是张浔

本篇文章讲述的是在 Vue2 中使用 Vue Router 的知识，阅读时间大概3分钟

前言

经过前几篇的学习，小伙伴学会了如何实现对元素和组件之间过渡的动画效果，是不是感觉挺好玩的，哈哈，发现炫酷的东西都比较吸引人，可是只是这些就满足了吗？经常逛一些教程网站的小伙伴可能发现过在路由跳转之间会有一个过渡动画的效果，比如慢慢消失再慢慢出现的效果，也许还会有一个进度条、loading等等好多好玩的东西，但是当时的你只是去查找资料去了，就没太在意这个东西，也就过去了，那么今天既然看到这篇文章了，如果你对我刚刚所说的感兴趣，请看完这篇文章，一定让你搞明白它具体是怎么实现的，搞不明白找我。

太多的字，小伙伴可能觉得啰嗦，可以直接忽略上面文字看下面动图的效果，这是本篇文章的主题。

路由过渡+进度条效果

路由过渡+loading效果

看过我这篇 《用一用Vant组件库》文章的小伙伴会觉得上面的动图演示很熟悉，今天的这个案例我进行了改造，不过是自己原生实现的，并没有使用第三方组件库，因为组件库有很多内置的动态效果，不便于演示。

路由过渡动效

那我们就来搞一搞吧，首先去官网 过渡动效 看看是怎么介绍的

看了官网的介绍和示例代码，发现就是用 transition 组件把 router-view 动态组件包裹起来就好了，原来如此的简单，还说 transition 组件的所有功能都可以使用，并没有什么冲突。

对于 router-view 动态组件，小伙伴们肯定知道吧，意思就是路由的出口，路由匹配到的组件将会被渲染在这里，这时，小伙伴看到动态组件，是不是想到了之前我的那一篇 《学一学在Vue2中实现过渡&动画的初始渲染和多个元素and组件过渡的效果》文章，里面讲到多个组件的过渡时，也是使用了动态组件 component ，这时候你想它们有什么不同吗？

我来告诉你，它们俩个最大的不同点就是在于 router-view 是根据路由地址变化，component 而是根据已注册的组件名字变化，听完我的解释，是不是豁然开朗呢？要不眼见为实一下吧，我把讲述多个组件的过渡那篇文章中展示的案例全屏给你们看一下，看看路由地址有没有变化，看下图。

看完动图，你会发现我点击微信登录与密码登录的时候，地址栏并没有变化，上面的 Fade、Multiple、Switch、MultipleDemo是通过 router-link 跳转的路由导航，相当于 a 超链接标签，所以路由地址发生了变化，懂了吧。

接下来，就来写路由之间的过渡效果吧，用 transition 组件把 router-view 组件包裹起来，加动画效果就可以了。

代码

通过前言中演示的动图效果，小伙伴们知道我们要实现的是什么效果了，为了后面更好的讲述，我把初步的代码先都放上来，然后再一步一步去修改，这样你能搞明白全部流程。

数据来源均来自后台接口，我先是将 axios 请求进行了二次封装，再引入需要的接口进行请求。

src/api/index.js 文件

// 引入 axios 模块
import axios from 'axios'

// 设置基准地址
axios.defaults.baseURL = 'http://127.0.0.1:3000/api'

// 获取导航列表接口
export const getNavListAPI = () => {
   
    return axios.get('/cate')
}

// 重置数据接口
export const resetAPI = () => {
   
    return axios.get('/