Vuejs路由守卫二十四

//route>index.js

{
   name: 'xinwen',
   path: 'news',
   component:News,
   meta: {isAuth:true,title: '新闻'},
        },

// 前置路由守卫
router.beforeEach((to,from,next) => {
  console.log('前置路由守卫',to,from,);
  if(to.meta.isAuth) {
    if(localStorage.getItem('school') === 'meiji') {
      next()
    } else {
      alert('学校名不对，没有权限')
    }
  } else {
    next()
  }
})

全局前置路由守卫：

• router.beforeEach((to,from,naxt) => {}):初始化的时候被调用，每次路由切换之前被调用；函数有三个参数:to:表示去哪里，from：表示来自哪里，next()：表示接着往下走（放行），是一个方法；
• meta{}:路由配置对象，叫路由元信息，就是程序员自定义的信息；可以在需要设置权限的路由组件上配置，用于简化判断；

//route>index.js
// 后置路由守卫
router.afterEach((to,from) => {
  console.log('后置路由守卫',to,from);
  document.title = to.meta.title || '我的系统'
})

• • 配置，用于简化判断；

• 后置路由守卫：

  • router.afterEach((to,from) => {}):初始化的时候被调用，每次路由切换之后被调用；只有to和from参数，没有next；
  • 用于修改每个路由组件的title名，在路由配置的meta中添加一个title属性，给每个路由组件填标题，然后利用后置路由守卫切换完组件后修改标题；

• 独享路由守卫：单独给别路由组件想权限限制的时候使用，直接配置在该组件的路由配置中，beforeEnter: (to,from,next) => {逻辑}；

• 组件内路由守卫：

  • beforeRouteEnter(to,from,next) {}:通过路由规则，进入该组件时被调用；
  • beforeRouteLeave(to,from,next) {}:通过路由规则，离开该组件时被调用；