Vue 路由过渡动效数据获取

asce1885 发布于2019-08-22 11:05 / 3114人阅读

摘要：在数据获取期间显示加载中之类的指示。导航完成之前获取导航完成前，在路由的钩子中获取数据，在数据获取成功后执行导航。

过渡动效

是基本的动态组件，所以我们可以用组件给它添加一些过渡效果：

单个路由的过渡

上面的用法会给所有路由设置一样的过渡效果，如果你想让每个路由组件有各自的过渡效果，可以在各路由组件内使用并设置不同的 name。

基于路由的动态过渡

还可以基于当前路由与目标路由的变化关系，动态设置过渡效果



  

// 接着在父组件内
// 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...

GPU云服务器云服务器 js获取路由器地址动效库动效 js动效库

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91761.html

Vue-router动画

摘要：在数据获取期间显示加载中之类的指示。导航完成之前获取导航完成前，在路由的钩子中获取数据，在数据获取成功后执行导航。附上两种数据获取小例 vue-router 过渡动效组件也有动画切换效果是基本的动态组件，所以我们可以用组件给它添加一些过渡效果：单个路由的过渡给每个添加特效在组件中加上中可以用那么命名 mode=out-in//设置先出还是...

wushuiyong 2019-08-21 16:27 评论0 收藏0
Vue Transition 实现类原生组件跳转过渡动画

摘要：官方文档演示地址请在移动端查看，端查看请打开移动端调试模式前言看了挺多的框架都不带过渡动画，今天心血来潮，就把自己平时用的动效抽离出来。原理模版中使用了提供的封装组件，配合类名在的六种不同的状态过渡中切换。官方文档：https://cn.vuejs.org/v2/guide... 演示地址：http://www.coderlife.com (请在移动端查看，PC端查看请打开移动端调试...

whatsns 2019-08-21 12:01 评论0 收藏0
Vue.js路由管理器 Vue Router

摘要：可以从其他文件进来定义路由每个路由应该映射一个组件。其中可以是通过创建的组件构造器，或者，只是一个组件配置对象。我们晚点再讨论嵌套路由。通过访问组件实例更新的时候路由离开以通过来取消。路由懒加载参考路由懒加载起步 HTML Hello App! Go to Foo Go to Bar JavaS...

崔晓明 2019-08-23 10:57 评论0 收藏0
[使用 Weex 和 Vue 开发原生应用] 6 使用 vue-router

摘要：使用值来作路由。原生应用本身就是多页的场景，页面间状态的隔离比共享更重要一些。使用开发的是原生应用，页面栈的管理使用的也是原生的特性，没有但是有模块可以实现页面的前进和后退等操作。系列文章的目录在 ? 这里（由于我比较懒最近一段时间在忙其他事，系列文章拖了好久终于又更新了。。。）什么是 vue-router ？ vue-router 官方文档 vue-router 是针对 V...

leonardofed 2019-08-20 15:51 评论0 收藏0
VueRouter进阶四(滚动行为)

摘要：滚动行为使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。这个方法返回滚动位置的对象信息，长这样如果返回一个布尔假的值，或者是一个空对象，那么不会发生滚动。滚动行为使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面...

kumfo 2019-08-22 11:05 评论0 收藏0