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...