Vue 路由 过渡动效 数据获取方法


Posted in Javascript onJuly 31, 2018

过渡动效

<router-view> 是基本的动态组件,所以我们可以用 <transition> 组件给它添加一些过渡效果:

<transition>
 <router-view></router-view>
</transition>

单个路由的过渡

上面的用法会给所有路由设置一样的过渡效果,如果你想让每个路由组件有各自的过渡效果,可以在各路由组件内使用 <transition> 并设置不同的 name。

基于路由的动态过渡

还可以基于当前路由与目标路由的变化关系,动态设置过渡效果

<!-- 使用动态的 transition name -->
<transition :name="transitionName">
 <router-view></router-view>
</transition>
// 接着在父组件内
// watch $route 决定使用哪种过渡
watch: {
 '$route' (to, from) {
  const toDepth = to.path.split('/').length
  const fromDepth = from.path.split('/').length
  this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
 }
}

数据获取

进入某个路由后,需要从服务器获取数据。例如,在渲染用户信息时,你需要从服务器获取用户的数据。我们可以通过两种方式来实现:

1.导航完成之后获取:先完成导航,然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示『加载中』之类的指示。

2.导航完成之前获取:导航完成前,在路由的 enter 钩子中获取数据,在数据获取成功后执行导航。

导航完成后获取数据

当你使用这种方式时,我们会马上导航和渲染组件,然后在组件的 created 钩子中获取数据。这让我们有机会在数据获取期间展示一个 loading 状态,还可以在不同视图间展示不同的 loading 状态。

假设我们有一个 Post 组件,需要基于 $route.params.id 获取文章数据:

在导航完成前获取数据

通过这种方式,我们在导航转入新的路由前获取数据。我们可以在接下来的组件的 beforeRouteEnter 钩子中获取数据,当数据获取成功后只调用 next 方法。

下面是地址:https://github.com/haxxk/xu_s...
https://github.com/haxxk/xu_s...

总结

以上所述是小编给大家介绍的Vue 路由 过渡动效 数据获取方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
Dec 23 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 Javascript
JavaScript中Promise的使用详解
Feb 26 Javascript
vue select组件的使用与禁用实现代码
Apr 10 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
Sep 29 Javascript
vue中$nextTick的用法讲解
Jan 17 Javascript
浅谈js中的bind
Mar 18 Javascript
详解Vue.js中引入图片路径的几种方式
Jun 17 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
May 27 Javascript
Vue基于localStorage存储信息代码实例
Nov 16 Javascript
javascript函数式编程基础
Sep 15 Javascript
JS实现判断图片是否加载完成的方法分析
Jul 31 #Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
Jul 31 #Javascript
vue实现word,pdf文件的导出功能
Jul 31 #Javascript
在create-react-app中使用css modules的示例代码
Jul 31 #Javascript
详解使用create-react-app添加css modules、sasss和antd
Jul 31 #Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 #jQuery
Vue导出页面为PDF格式的实现思路
Jul 31 #Javascript
You might like
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
一个程序下载的管理程序(四)
2006/10/09 PHP
PHP 页面编码声明方法详解(header或meta)
2010/03/12 PHP
PHP中redis的用法深入解析
2014/02/20 PHP
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
php获取客户端电脑屏幕参数的方法
2015/01/09 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
用jQuery实现检测浏览器及版本的脚本代码
2008/01/22 Javascript
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
基于jquery的跨域调用文件
2010/11/19 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
vue组件间通信子与父详解(二)
2017/11/07 Javascript
JavaScript实现单例模式实例分享
2017/12/22 Javascript
JS运动特效之链式运动分析
2018/01/24 Javascript
完美解决axios跨域请求出错的问题
2018/02/05 Javascript
jQuery中可见性过滤器简单用法示例
2018/03/31 jQuery
webpack打包非模块化js的方法
2018/10/24 Javascript
Python isinstance函数介绍
2015/04/14 Python
Python 获取项目根路径的代码
2019/09/27 Python
python实现图片横向和纵向拼接
2020/03/05 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
PyCharm常用配置和常用插件(小结)
2021/02/06 Python
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
接口中的方法可以是abstract的吗
2015/07/23 面试题
优秀求职自荐信怎样写
2013/12/18 职场文书
中英文求职信范文
2014/01/27 职场文书
会计员岗位职责
2014/03/15 职场文书
英文演讲稿开场白
2014/08/25 职场文书
法定授权委托证明书
2014/09/27 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
捐助倡议书
2015/01/19 职场文书
中学生自我评价范文
2015/03/03 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
Python控制台输出俄罗斯方块的方法实例
2021/04/17 Python