Vue —— 进阶 vue-router 路由（三）（全局路由守卫）

  router.beforeEach((to, from, next) => {
    console.log('前置路由守卫', to, from);
    if (to.meta.isAuth) { //判断当前路由是否需要进行权限控制
        if (localStorage.getItem('school') === 'shandong') { //控制权限的具体规则
          next() //放行
        } else {
          alert('学校名不对，无权限查看！')
        }
    } else {
      next() //放行
    }
  })

  router.afterEach((to, from) => {
    console.log('后置路由守卫', to, from);
    if(to.meta.title) {
    document.title = to.meta.title //修改网页的title
      } else {
    doument.title = 'vue_test'  
    }
  })

  const router = new VueRouter({
    ......
    children: [{
        name: 'xiangqing',
        path: 'detail/:id/:title',
        component: Detail,
        meta: {
          isAuth: true, //开始权限
          title: '详情' //路由标题
        },
        props($route) {
          return {
            id: $route.params.id,
            title: $route.params.title
          }
        } 
     }]
     ......
   })
  // 全局前置路由守卫——初始化的时候被调用、每次路由切换之前被调用
  router.beforeEach((to, from, next) => {
    console.log('前置路由守卫', to, from);
    if (to.meta.isAuth) {
      if (localStorage.getItem('school') === 'shandong') {
        next()
      } else {
        alert('学校名不对，无权限查看！')
      }
    } else {
      next()
    }
  })
  // 全局后置路由守卫——初始化的时候被调用、每次路由切换之后被调用
  router.afterEach((to, from) => {
    console.log('后置路由守卫', to, from);
    document.title = to.meta.title || '初始页'
  })
  export default router

  ......
  name: 'xinwen',
  path: 'news',
  component: News,
  meta: {
      isAuth: true,
      title: '新闻'
  },
  beforeEnter: (to, from, next) => {
      console.log('独享路由守卫', to, from);
      if (to.meta.isAuth) {
        if (localStorage.getItem('school') === 'shandong') {
          next()
        } else {
          alert('学校名不对，无权限查看！')
        }
      } else {
        next()
      }
    }
    ......
    router.afterEach((to, from) => {
      document.title = to.meta.title || '初始页'
      console.log('后置路由守卫', to, from);
  })

    //进入守卫
    beforeRouteEnter(to, from, next) {...}
    //离开守卫
    beforeRouteLeave(to, from, next) {...}

  <template>
    <h2>我是About的内容</h2>
  </template>
  <script>
  export default {
    name: "myAbout",
    // 通过路由规则，进入该组件时被调用
    beforeRouteEnter(to, from, next) {
      console.log("About——beforeRouteEnter", to, from);
      if (to.meta.isAuth) {
        if (localStorage.getItem("school") === "shandong") {
          next();
        } else {
          alert("学校名不对，无权限查看！");
        }
      } else {
        next();
      }
    },
    // 通过路由规则，离开该组件时被调用
    beforeRouteLeave (to, from, next) {
      console.log("About——beforeRouteLeave", to, from);
      next()
    }
  };
  </script>