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 相关文章推荐
基于jquery的跨域调用文件
Nov 19 Javascript
jQuery拖拽div实现思路
Feb 19 Javascript
原生js和jQuery实现淡入淡出轮播效果
Dec 25 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
JS iFrame加载慢怎么解决
May 13 Javascript
浅谈jQuery hover(over, out)事件函数
Dec 03 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
在vue中多次调用同一个定义全局变量的实例
Sep 25 Javascript
对angular 实时更新模板视图的方法$apply详解
Oct 09 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
JavaScript实现网页动态生成表格
Nov 25 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
火车采集器 免费版使出收费版本功能实现原理
2009/09/17 PHP
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
Linux系统下PHP-FPM的安装和配置教程
2015/08/17 PHP
eclipse php wamp配置教程
2016/06/30 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
一段实时更新的时间代码
2006/07/07 Javascript
利用javascript中的call实现继承
2007/01/22 Javascript
JS 中document.URL 和 windows.location.href 的区别
2009/11/11 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
详解AngularJS中ng-src指令的使用
2016/09/07 Javascript
遍历json 对象的属性并且动态添加属性的实现
2016/12/02 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
2017/10/24 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
vue过滤器用法实例分析
2019/03/15 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
编写Python CGI脚本的教程
2015/06/29 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
软件测试工程师面试问题精选
2016/10/28 面试题
酒店值班经理的工作职责范本
2014/02/18 职场文书
2014年店长工作总结
2014/11/17 职场文书
网吧温馨提示
2015/07/17 职场文书
小学二年级语文教学反思
2016/03/03 职场文书