路由守卫总结(全局守卫、后置钩子、路由独享守卫、组建内守卫)

路由守卫
路由独享守卫(beforeEach) main.js中进行配置
//路由守卫
router.beforeEach((to, from, next) => {
  if (to.path == '/login' || to.path == '/register') {
    next();
  } else {
    alert("还没有登录")
    next("/login")
  }
})

//后置钩子
router.afterEach((to, from) => {
  alert("aftereach")
})

//路由独享守卫 router.js中进行设置 (beforeEnter对admin进行单独设置)
{ path: '/menus', component: Menus },
  {
    path: '/admin', component: Admin, beforeEnter: (to, from, next) => {
      alert("非登陆状态，请先登录")
      next("./login")
    }
}

 //组建内守卫(进入beforeRouteEnter与离开beforeRouteLeave    再单独的组件中 例如Admin.vue中进行设置)
  beforeRouteEnter: (to, from, next) => {
    next(vm => {
      alert("hello" + vm.name);
    });
  }

  beforeRouteLeave(to, from, next) {
    if (confirm("确定离开吗？") == true) {
      next();
    } else {
      next(false);
    }
  }

最后

以上就是洁净板凳为你收集整理的路由守卫总结(全局守卫、后置钩子、路由独享守卫、组建内守卫)的全部内容，希望文章能够帮你解决路由守卫总结(全局守卫、后置钩子、路由独享守卫、组建内守卫)所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。