避免千篇一律的路由切换动效的一个方法是:监听路由信息对象$route,根据路由切换信息来动态选择一个过渡效果。

首先我们将transition组件的name绑定到Vue实例的模型属性,以便动态地修改这个名字 —— 你知道,不同的name对应着不同的动效样式类名称,因而也就实现了不同的过渡动效。

例如,下面的模板将过渡动效组件的name属性绑定到Vue实例的effect属性:

<transition :name="effect">
  <router-view></router-view>
</transition>

接下来是监听路由信息对象$route的变化。$route反映了当前的活动路由,它是VueRouter为Vue实例添加的一个响应式属性,因此我们可以在创建Vue实例时使用watch配置项声明一个监听器,或者使用$watch()方法监听它的每一次变化:

vm.$watch('$route',function(nv,ov){...})

$route的新值(nv - new value)代表当前的路由信息对象,旧值(ov - old value)代表前一次的路由信息对象,因此我们可以根据路径切换的不同来改变实例的effect属性。

例如,下面的代码,将根据当前的活动路径来设置Vue实例的effect属性:

vm.$watch('$route',function(to,from){
  const effectMap = {
    '/': 'home',
    '/blogs':'blog',
    '/about':'about'
  }
  this.effect =  effectMap(to.path)
})

使用第三方动效库

如果使用第三方动效库,例如Animate.css,那么就应当将enter-active-class系列的样式类属性,绑定到Vue实例的响应式属性上。

例如,下面的模板中过渡动效组件的enter-active-class属性被绑定到Vue实例的effect属性:

<transition :enter-active-class="effect">
  <router-view></router-view>
</transition>
//..........................................................练习...................................................................
//html部分


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="lib/animate.css">
</head>
<body>

  <div id="app" v-cloak>
    <nav class="header">
      <router-link to="/">首页</router-link>
      <router-link to="/blogs">博客</router-link>
      <router-link to="/about">关于</router-link>
    </nav>
    <transition :enter-active-class="effect">
      <router-view></router-view>
    </transition>
  </div>    
  
  <script src="lib/vue-router.stack.min.js"></script>
  <script src="lib/lodash.min.js"></script>
  
</body>
</html>


//js部分


 const EzHome = {template:'<div class="home"><h1>HOME</h1></div>'}
const EzBlogs = {template:'<div class="blogs"><h1>BLOGS</h1></div>'}
const EzAbout = {template:'<div class="about"><h1>ABOUT</h1></div>'}

const router = new VueRouter({
  routes:[
    {path:'/',component:EzHome},
    {path:'/blogs',component:EzBlogs},
    {path:'/about',component:EzAbout}
  ]
})

new Vue({
  el:'#app',
  router,
  data:{
    effects: ['zoomIn','slideInDown','bounceIn','flipInX','rotateIn','rollIn','lightSpeedIn','fadeIn'],
    effect :''
  },
  watch:{
    '$route'(to,from){
      const effectMap = {
          "/":"fadeIn",
        "/blogs":"rotateIn",
        "/about":"zoomIn"
      }
      this.effect = ['animated', effectMap[to.path]].join(' ')
    }
  }
})

Logo

前往低代码交流专区

更多推荐