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 继承详解(三)
Jul 13 Javascript
jquery文档操作wrap()方法实例简述
Jan 10 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
Aug 02 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
Jan 07 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 Javascript
MVVM框架下实现分页功能示例
Jun 14 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
May 10 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
May 23 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 Javascript
js中Function引用类型常见有用的方法和属性详解
Dec 11 Javascript
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 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
再说下636单管机
2021/03/02 无线电
php smarty截取中文字符乱码问题?gb2312/utf-8
2011/11/07 PHP
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
php session 写入数据库
2016/02/13 PHP
php数据序列化测试实例详解
2017/08/12 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
javascript 判断数组是否已包含了某个元素的函数
2010/05/30 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
微信小程序使用Socket的实例
2017/09/19 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
jQuery实现简单弹幕效果
2019/11/28 jQuery
JavaScript实现轮播图特效
2020/04/10 Javascript
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python实现高效求解素数代码实例
2015/06/30 Python
结合Python的SimpleHTTPServer源码来解析socket通信
2016/06/27 Python
利用Python实现命令行版的火车票查看器
2016/08/05 Python
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
Django的models模型的具体使用
2019/07/15 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
医院营销工作计划
2015/01/16 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
丧事主持词
2015/07/02 职场文书
煤矿隐患排查制度
2015/08/05 职场文书
《文化苦旅》读后感:阅读,让人诗意地栖居在大地上
2019/12/24 职场文书
Sleuth+logback 设置traceid 及自定义信息方式
2021/07/26 Java/Android
Windows server 2003卸载和安装IIS的图文教程
2022/07/15 Servers