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操作二级联动实现代码
Jul 27 Javascript
使用GruntJS构建Web程序之安装篇
Jun 04 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
Nov 08 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
Apr 18 Javascript
Canvas放置反弹效果随机图形(实例)
Aug 17 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
js实现HTML中Select二级联动的实例
Jan 05 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
Nov 15 Javascript
layui实现左侧菜单点击右侧内容区显示
Jul 26 Javascript
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
详解phpstorm2020最新破解方法
2020/09/17 PHP
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
微信小程序自定义弹窗wcPop插件
2018/11/19 Javascript
JavaScript模板引擎应用场景及实现原理详解
2018/12/14 Javascript
原生javascript实现连连看游戏
2019/01/03 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
Python显示进度条的方法
2014/09/20 Python
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
python如何对实例属性进行类型检查
2018/03/20 Python
python用插值法绘制平滑曲线
2021/02/19 Python
使用python Telnet远程登录执行程序的方法
2019/01/26 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
Python将string转换到float的实例方法
2019/07/29 Python
Python 3.8正式发布,来尝鲜这些新特性吧
2019/10/15 Python
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
小学生暑假感言
2014/02/06 职场文书
租赁协议书范本
2014/04/22 职场文书
实习协议书范本
2014/04/22 职场文书
解除聘用合同证明书范本
2014/09/11 职场文书
法定代表人身份证明书
2015/06/18 职场文书
公司员工管理制度
2015/08/04 职场文书
党员干部学习心得体会
2016/01/23 职场文书
小数乘法教学反思
2016/02/22 职场文书
优秀大学生申请书
2019/06/24 职场文书