Vue-Router路由守卫

全局路由守卫

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

// 前置路由守卫
router.beforeEach((to,from,next) => {
  // flag是你的判断条件
  const flag = true
  if(flag) {
    next()
  }else{
    alert('没有权限访问')
  }
})
// 后置路由守卫
router.afterEach((to,from) => {
  // 通常用的不多
  // 比如可动态修改title
  window.document.title = '首页'
  // 比如可以使用第三方的插件，来做页面的加载进度条等等
})

export default router

独享路由守卫

只有前置，没有后置，需要的话使用全局后置路由

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      // 独享路由守卫
      beforeEnter(to,from,next) {
        ...  
      }
    }
  ]
})

export default router

组件内路由守卫

export default {
    name: "HelloWorld",
    data() {
        return {};
    },
    mounted() {
    },
    // 通过路由的方式进去该组件
    beforeRouterEnter(to, from, next) {

    },
    // 通过路由的方式离开该组件
    beforeRouterLeave(to, from, next) {

    }
};

注意：这种方式就不是前置，后置了，而是进入和离开路由守卫