路由守卫

路由前置全局守卫：

router.beforeEach((to,from,next)=>{})

全局守卫是针对所有路由的，它有三个参数，to是你想要去哪个路由，from是你来自哪个路由，next()是放行。

全局后置守卫：

路由变换完切换完成之后，触发回调，只有连个参数to,from，主要用来离开路由的时候，弹出的广告

router.afterEach((to,from)=>{})

路由独享守卫：

单个路由自己独有的守卫，专门用在单个路由,写在路由配置里面，局部没有后置

beforeEnter(to,from,next）{}他是一方法

组件内部守卫：

组件内的守卫 --能够在这里听到路由的变化，并且可以后续的使用实例this，可以传递一个回调函数

有两个函数：

1.beforeRouterEnter(){} //监听路由的进入

        beforeRouteEnter(to,from,next){
            console.log(to);
            console.log(from);
            //组件守卫进入的时候，next可以传递一个回调函数使用this指向,回调函数有一个参数的vm，就是当前
            //组件的实例
            next((vm)=>{
                console.log(vm);
            })
        },

 

2.beforeRouterUpadate(to,from,next){} //监听路由的更新

路由参数  发生改变触发这个事件变化

3.beforeRouterLeave(){} //监听路由的离开

 

路由组件切换的动画：transition内置组件

需要路由组件切换的动画，需要用transition组件包裹着

<template>
  <div id="app">
    <Nav></Nav>
    <div id="content">
      <transition name="fade">
        <router-view class="view"></router-view>
      </transition>
    </div>
​
  </div>
</template>
<script>
  import Nav from './components/APP/Nav'
  export default {
    name:'app',
    components:{
      Nav,
    }
  }
</script>
<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
​
#nav {
  padding: 30px;
​
  a {
    font-weight: bold;
    color: #2c3e50;
​
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
  .view{
    position: absolute;
    width: 500px;
    height: 200px;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: pink;
    transition: 1s;
    transform-origin: center center -350px;
  }
  //淡入淡出的样式
  /*.liquan-enter{*/
  /*  //初始状态*/
  /*  opacity: 0;*/
  /*}*/
  /*.liquan-enter-active{*/
  /*  //进入激活之时*/
  /*  transition: .3s;*/
  /*}*/
  /*.liquan-enter-to{*/
  /*  opacity: 1;  //进入的最终状态*/
  /*}*/
  /*.liquan-leave{*/
  /*  //离开的初始样式*/
  /*  opacity: 1;*/
  /*}*/
  /*.liquan-leave-active{*/
  /*  transition: .3s;*/
  /*}*/
  /*.liquan-leave-to{*/
  /*  //离开的最终样式*/
  /*  opacity: 0;*/
  /*}*/
  #content{
    position: relative;
    margin: auto;
    /*border: 1px solid red;*/
    width: 500px;
    height: 600px;
    overflow: hidden;
    perspective:900px;
    transform-style: preserve-3d;
    /*overflow: hidden;*/
  }
  //.左右滑入的样式
  /*.scroll-enter{*/
  /*  transform: translateX(100%);*/
  /*}*/
  /*.scroll-enter-to{*/
  /*  transform: translateX(0);*/
  /*}*/
​
  /*.scroll-leave{*/
  /*  transform: translateX(0);*/
  /*}*/
  /*.scroll-leave-to{*/
  /*  transform: translateX(-100%);*/
  /*}*/
  //翻转动画
  .fade-enter{
    transform: rotateY(90deg);
  }
  .fade-enter-to{
    transform: rotateY(0deg);
  }
  .fade-leave{
    transform: rotateY(0deg);
  }
  .fade-leave-to{
    transform: rotateY(-90deg);
  }
  /*.fade-leave-active{*/
  /*  transition: .1s;*/
  /*}*/
</style>

​