路由前置全局守卫：

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