Vue 路由 过渡动效 数据获取方法
过渡动效
<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 路由 过渡动效 数据获取方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
详解Vue-cli webpack移动端自动化构建rem问题
这篇文章主要介绍了详解Vue-cli webpack移动端自动化构建rem问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了element-ui表格数据转换的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
Vue Router解决多路由复用同一组件页面不刷新问题(场景分析)
这篇文章主要介绍了Vue Router解决多路由复用同一组件页面不刷新问题,多路由复用同一组件的场景分析，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了mpvue全局引入sass文件的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要给大家介绍了基于vue大数据表格卡顿问题的完美解决方案，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
Vue + Element 实现按钮指定间隔时间点击思路详解
这篇文章主要介绍了Vue + Element 实现按钮指定间隔时间点击,实现思路大概是通过加一个本地缓存的时间戳，通过时间戳计算指定时间内不能点击按钮，具体实现代码跟随小编一起看看吧2023-12-12
接收一个输入的手机号,判断输入的手机号是否正确是一个很常见的功能,这篇文章主要给大家介绍了关于前端Vue手机号校验以及后端Java手机号校验的相关资料,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了应用provide与inject刷新Vue页面的两种方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，多多进步，祝大家早日升职加薪2021-09-09
这篇文章主要介绍了玩转Vue的8个小技巧，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2021-01-01
vue项目Network: unavailable的问题及解决
这篇文章主要介绍了vue项目Network: unavailable的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-09-09
最新评论