用beforeRouteLeave独享守卫钩子函数做路由过滤

在使用beforeRouteLeave独享守卫钩子函数做路由过滤之前，我们首相讲解下该函数使用的一些基础，和使用该函数的需求场景。

beforeRouteLeave带有三个参数，分别是to，from，next

    to（指向目的地的对象信息）

    from（指向来源对象信息）

    next（继续向下走）（next(true), next()都是正常向下走，next(false)停止向下走）

注意：beforeRouteLeave只对内部路由约束

          外部链接是不受约束的

          当前路由刷新也不受约束

其实，在很多项目中，当页面离开的时候，我们会遇到各色各样的需求，下面我总结下我最常见遇到的需求：

    1.缓存当前页面数据
    2.清除当前页面缓存数据

    3.拦截跳转

页面离开的方式，一般分为两种：

    1.指向性离开（触发固定式的链接而离开）

    2.非指向性离开（物理返回或关闭离开）

示例demo，仅供参考

<template>
  <div class="test-box">
    <p @click="go(1)">点击跳到内部HelloWorld</p>
    <p @click="go(2)">点击跳到内部HelloWorld2</p>
    <p @click="go(3)">点击跳到外部百度</p>
  </div>
</template>
<script>
export default {
  name:'test',
  data() {    
    return {
      interceptLeave:0,//（0正常离开，1拦截） 
    }
  },
  methods: {
    go(type){ 
      switch (type) {
        case 1: this.$router.push({ name: 'HelloWorld' });
                break;
        case 2: this.interceptLeave = 1;
                this.$router.push({ name: 'HelloWorld2' });
                break;
        case 3: location.href = 'https://www.baidu.com';//外部链接，不受beforeRouteLeave约束
                break;
      }
    }
  },
  beforeRouteLeave(to, from, next){
     let self = this;
     console.log(self.interceptLeave)
     if(self.interceptLeave){
       next(false);
     }else{
        next();
     }
  }
}
</script>

<style scoped>
  .test-box{
      width:100%;
      height:auto;
      padding:0;
      margin: 0 auto;
      text-align: center;
      font-size: 20px;
      display: block;
  }
</style>