路由导航守卫

最新推荐文章于 2023-11-10 18:32:36 发布

酷酷的旭

最新推荐文章于 2023-11-10 18:32:36 发布

阅读量5.3k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_43195512/article/details/90746148

版权

vue 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

我们可以通过守卫来判断是否登录如果登录放行，否则不放行

全局守卫

在这里插入图片描述

//任何视图导航都要经过这
//该函数有三个参数
to 去哪
from 来自哪里
next 放行的信号
router.beforeEach((to,from,next)=>{
//...
//这样谁也进不来
//但next()就是谁都能过来
//所以要判断
//如果用户是非||/login视图，则校验其是否登录
//如果登录了就放行 如果没登录就跳转到/login
//to可以看到从哪来也就是说要访问的路径
const {path} = to
if(path !== 'login'){//如果请求不是login则校验
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190603015621887.png)
}else{
//如果用户请求的就是/login则直接调用bext()放行
next()
}
})
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190603015338163.png)
## 子路由
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190603030855621.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE5NTUxMg==,size_16,color_FFFFFF,t_70)