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 相关文章推荐
js removeChild 障眼法 可能出现的错误
Oct 06 Javascript
jQuery dialog 异步调用ashx,webservice数据的代码
Aug 03 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 Javascript
Angularjs手动解析表达式($parse)
Oct 12 Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 Javascript
Vue项目中如何引入icon图标
Mar 28 Javascript
JS 使用 window对象的print方法实现分页打印功能
May 16 Javascript
浅谈JavaScript闭包
Apr 09 Javascript
详解Vue中组件传值的多重实现方式
Aug 16 Javascript
vue+element导航栏高亮显示的解决方式
Nov 12 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
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
php利用反射实现插件机制的方法
2015/03/14 PHP
PHP类与对象后期静态绑定操作实例详解
2018/12/20 PHP
php的扩展写法总结
2019/05/14 PHP
国外的为初学者写的JavaScript教程
2008/06/09 Javascript
标题过长使用javascript按字节截取字符串
2014/04/24 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
javascript实现右下角广告框效果
2017/02/01 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
python实现2048小游戏
2015/03/30 Python
Python中统计函数运行耗时的方法
2015/05/05 Python
python实现按行切分文本文件的方法
2016/04/18 Python
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
Pandas之缺失数据的实现
2021/01/06 Python
Perfume’s Club法国站:购买香水和化妆品
2019/05/02 全球购物
应届毕业生专业个人求职自荐信格式
2013/11/20 职场文书
幼儿园运动会加油词
2014/02/14 职场文书
大班开学家长寄语
2014/04/04 职场文书
中学生家长评语大全
2014/04/16 职场文书
义和团口号
2014/06/17 职场文书
毕业生找工作自荐书
2014/06/30 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
整改报告怎么写
2014/11/06 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
学生病假条怎么写
2015/08/17 职场文书
python自动化测试通过日志3分钟定位bug
2021/11/20 Python