vue-router进阶

引言

除了从头学vue-router
补充下剩下的vue-router内容

过渡动效

vue的动画

【目的】：实现一个按钮，点击后文字消失/出现，呈过渡效果，如下

List.vue:

<template>
    <div>
     <!--show取反-->
      <button @click="show =!show">show/hide text</button>
      <transition name="fade">
      <p v-if="show">Hello World</p>
      </transition>
    </div>
</template>

<script>
    export default {
        name: "List",
      data(){
          return{
            show:true,
          }
      }

    }
</script>

<style scoped>
 /*给进入过程和离开过程加transition 变化属性：透明度 持续0.5s*/
 /*从无到有/从有到无 时的过渡效果*/
 .fade-enter-active, .fade-leave-active{
  transition: opacity .5s;
}
/*给进入之前，离开之后  即无的时候*/
/*隐藏时的样式*/
 .fade-enter, .fade-leave-to{
   opacity: 0;
 }
</style>

主要是style里的内容
enter:从无到有
leave：从有到无

从载入动画到移除动画，有几个时间点，只要我给某个元素包裹上transission标签并给一个name，它就会在这几个时间点分别拥有几个类名

【再做个复杂一些的】

进入过程3s,离开过程1s。隐藏时的状态为opacity:0;右移20px

修改style如下

<style scoped>
/*从无到有*/
 .fade-enter-active{
  transition: all 1s
}
/*从有到无*/
  .fade-leave-active{
    transition: all 3s
  }
/*无的时候*/
 .fade-enter, .fade-leave-to{
   opacity: 0;
   transform: translateX(20px);
 }
</style>

有动画的路由

路由切换时的动画,比如在user页面，点击’更多信息‘，显示子路由more内容，使其有个过渡效果，效果如下：

修改User.vue如下

<template>
    <div>
      <span style="display: inline-block">user:{{$route.params.name}}</span>
      <span style="display: inline-block;" v-if="$route.query.age">  我今年：{{$route.query.age}}岁了</span>
      <router-link :to="'/user/'+$route.params.name+'/more'">用户信息</router-link>
      
      <transition name="fade" mode="in-out">
      <router-view></router-view>
      </transition>
      
    </div>
</template>

<script>
    export default {
        name: "User",
    }
</script>

<style scoped>
/*这里和上面第一个动画效果一样，只不过为了使得效果更明显，时间改为1s*/
  .fade-enter-active, .fade-leave-active{
    transition: opacity 1s;
  }
  .fade-enter, .fade-leave-to{
    opacity: 0;
  }
</style>

这里只是一个简单的应用，动画方式还有很多，比如可以实现下面：

数据获取

导航完成后获取数据

这个在项目中用过，在created/mounted里取this.$route.query.XX，利用该值使用axios从后台获取数据即可。可以加个watch，一但route变化重新执行获取数据的方法

 watch: {
    // 如果路由有变化，会再次执行该方法
    '$route': 'fetchData'
  },

导航完成前获取数据

通过这种方式，我们在导航转入新的路由前获取数据。我们可以在组件的 beforeRouteEnter 守卫中获取数据。to.params即可取到目的组件的参数，向后台获取数据，这里要用到之前说的next回调函数，因为取不到this，用不了this里的方法。

滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。
比如想实现如下效果，每次路由切换，滚动条回到顶部

则对router设置

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
  }
})

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。
返回 savedPosition，在按下 后退/前进 按钮时，就会像浏览器的原生表现那样：

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

非前进后退的路由切换，回到顶部。
前进后退的路由切换，回到该页面之前记录的位置。