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 相关文章推荐
JavaScript使用cookie
Feb 02 Javascript
Add a Picture to a Microsoft Word Document
Jun 15 Javascript
javascripit实现密码强度检测代码分享
Dec 12 Javascript
javascript每日必学之循环
Feb 19 Javascript
jquery.validate使用详解
Jun 02 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
Vue filter介绍及其使用详解
Oct 21 Javascript
JavaScript实现百度搜索框效果
Mar 26 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
Jul 18 Javascript
解决vue自定义全局消息框组件问题
Nov 22 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
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
利用PHP动态生成VRML网页
2006/10/09 PHP
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
javascript 网页跳转的方法
2008/12/24 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
2015/11/18 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
Node.Js生成比特币地址代码解析
2018/04/21 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
python中input()与raw_input()的区别分析
2016/02/27 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
python看某个模块的版本方法
2018/10/16 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
Python编程中类与类的关系详解
2019/08/08 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
Python While循环语句实例演示及原理解析
2020/01/03 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
财务管理专业推荐信
2013/11/19 职场文书
秋季运动会稿件
2014/01/30 职场文书
高二物理教学反思
2014/02/08 职场文书
高速铁道技术专业求职信
2014/08/09 职场文书
工作经验交流材料
2014/12/30 职场文书
起诉意见书范文
2015/05/19 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫
python三子棋游戏
2022/05/04 Python