vue-router 切换页面之2

妖狐艹你老母 2021-11-05 00:28 278阅读 0赞

切换页面两点实现  
1.如何判断切换路由时是前进还是后退

2.每次切换时向左向右切换动画如何实现  
我们需要给各个页面定义层级,在切换路由时判断用户是进入哪一层页面,如果用户进入更高层级那么做前进动画,如果用户退到低层级那么做后退动画.

router/index.js
    
    import VueRouter from 'vue-router'
    import Home from '../components/home/home'
    import User from '../components/user/user'
    
    var router = new VueRouter({
        routes:[{
            name:'test',
            path:'/',
            meta:{index:0},//meta对象的index用来定义当前路由的层级,由小到大,由低到高
            component:{
                template:'<div>test</div>'
            }
        },{
            name:'home',
            path:'/home',
            meta:{index:1},
            component:Home
        },{
            name:'user',
            path:'/user/:id',
            meta:{index:2},
            component:User
        }]
    });

watch监视路由变化

<template>
      <div id="app">
        <transition :name="transitionName">   
          <router-view></router-view>
        </transition>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App',
      data(){
          return {
              transitionName:''
          }
      },
      watch: {//使用watch 监听$router的变化
        $route(to, from) {
          //如果to索引大于from索引,判断为前进状态,反之则为后退状态
          if(to.meta.index > from.meta.index){
    	    //设置动画名称
            this.transitionName = 'slide-left';
          }else{
            this.transitionName = 'slide-right';
          }
        }
      }
    }
    </script>

css切换样式 -----本人的有点绚！！！可能不太适合你们的项目 自己修改吧

.slide-right-enter-active,
    .slide-right-leave-active,
    .slide-left-enter-active,
    .slide-left-leave-active {
      will-change: transform;
      transition: all 500ms;
      position: absolute;
    }
    .slide-right-enter {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }
    .slide-right-leave-active {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }
    .slide-left-enter {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }
    .slide-left-leave-active {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }