VUE-导航守卫

最新推荐文章于 2024-09-25 15:13:44 发布

巷子里有条狗

最新推荐文章于 2024-09-25 15:13:44 发布

阅读量201

点赞数

分类专栏：前端文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/qq_40561863/article/details/129916609

版权

前端专栏收录该内容

50 篇文章 0 订阅

订阅专栏

文章介绍了Vue.js中用于保护路由的导航守卫功能，包括全局前置守卫、路由独享守卫和组件内守卫。通过示例展示了如何在不同场景下使用这些守卫，例如在全局前置守卫中检查token进行权限控制，以及在组件内守卫中在离开时进行确认操作。

摘要由CSDN通过智能技术生成

导航守卫

场景：当刷新页面时，会使得vuex仓库中的数据归零

概念：当路由发生跳转时，会被导航守卫拦截（自身就是函数），我们就能够在函数中实现自己的业务

分类：

全局守卫  
	全局前置守卫  （我们讲这个）
	全局解析守卫
	全局后置钩子

路由独享守卫  

组件内守卫 
    beforeRouteEnter  
    beforeRouteUpdate
    beforeRouteLeave   (我们讲这一个)

1 全局前置守卫

位置：路由配置文件

只要路由发生了跳转，都会被拦截

router/index.js

router.beforeEach((to, from,next) => {
  //to代表目标路由
  //from代表源路由
  //next() 代表放行
  //next("/....")跳转到某个路由中
 
})

demo：如果进入非登录、注册组件则需要判断是否有token，有就放行，没有就滚到登录界面

//全局前置守卫
router.beforeEach((to, from,next) => {
  //to代表目标路由
  //from代表源路由
  console.log(to.path,from.path);
  //登录、注册组件直接放行 
  if(to.path=="/login" || to.path=="/register"){
    next();
  }else{
    //判断是否有token
    if(localStorage.token){//  localStorage.getItem("token")
        next()
    }else{
       next("/login");
    }
  }
  //next() 代表放行
  //next("/....")跳转到某个路由中
 
})

2 路由独享守卫

位置：路由配置文件

只会影响当前路由

      {
        path: "stuList",
        component: StuList,
        meta:{
           name:"学生列表",
           url:"/main/stuList",
        },
        beforeEnter: (to, from,next) => {
         
        },

3 组件内守卫 beforeRouteLeave

位置：组件内部

当离开某个组件时被拦截

export default {
    beforeRouteLeave(to, from, next){
       
    }
}

demo：离开组件时，如果文本框中有内容，则提示确认离开吗

    beforeRouteLeave(to, from, next){
        if(this.t){
            //提示框
            let flag=confirm("确认离开吗")
            if(flag){
                next()
            }
        }else{
            next();
        }
    }