vue路由守卫路由导航守卫

一.全局守卫
全局的写在main.js里面执行

1. router.beforeEach((to,from,next)=>{})
2. 回调函数中的参数，to：进入到哪个路由去，from：从哪个路由离开，next：函数，决定是否展示你要看到的路由页面。

前置守卫
router.beforeEach((to,from,next)=>{
  if(to.path == '/login'){
    next();
  }else{
    alert('您还没有登录，请先登录');
    next('/login');//自动跳转到登录页面
  }
})

后置守卫
router.afterEach((to,from)=>{
  alert("after each");
})

二、组件内守卫

<script>
export default {
 //进入
 //在路由改变之前
//在渲染该组件的对应路由被confirm前调用
//不能获取当前组件实例this,因为在守卫执行之前，实例还没有被创建
//但是你可以通过传一个回调函数给next来访问组件实例。
//在导航被确认的时候进行回调，并且把组件实例作为回调方法的参数
    beforeRouteEnter:(to,from,next)=>{
      //业务逻辑
    },
</script>

```javascript
 //离开
可以利用这个方法当用户离开某个页面的时候，提示用户保存信息
比如在写博客是点击其他页面时，会提示是否保存当前内容
  beforeRouteLeave:(to,from,next)=>{
    if(confirm("确定离开此页面吗？") == true){
         next();
     }else{
         next(false);
     }
    }
}

 //离开
路由更新的守卫
  beforeRouteupdate:(to,from,next)=>{
  }

三、路由独显守卫

const router = new VueRouter({
 routes: [
  {
   path: '/foo',
   component: Foo,
   beforeEnter: (to, from, next) => {
    // ...
   }
  }
 ]
})

路由钩子有那些

全局的
router.beforeEach
router.afterEach
独显的
beforeEnter
组件的
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave

顺序

进入路由守卫的顺序
beforeEach beforeEnter beforRouteEnter, afterEach
离开路由守卫的顺序
导航被触发（A–>B）
调用A组件内路由守卫beforeRouteLeave(to,from,next)
调用全局路由前置守卫router.beforeEach(to,from,next)
调用B路由独享守卫 beforeEnter(to,from.next)
解析异步路由组件B
调用B的组件内路由守卫beforeRouteEnter(to,from,next)
调用全局路由钩子router.afterEach(to,from)
渲染B组件DOM