Vue 路由 路由守卫

news/2024/11/24 5:49:23/
路由守卫
正如其名, vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。简单来说,就是在路由跳转
时候的一些钩子,当从一个页面跳转到另一个页面时,可以在跳转前、中、后做一些事情。
当你打开一个页面的前后需要去干什么。
每个守卫方法接收参数:
  • to:即将要进入的目标,是一个路由对象
  • from:当前导航正要离开的路由,也是一个路由对象
  • next:可选,是一个方法,直接进入下一个路由
你可以使用 router.beforeEach 注册一个全局前置守卫,当一个导航触发时,就会异步执行这个回调函数。

to是指从哪个页面来,from代表从根目录来。to:从哪来  from:到哪去    

//2.创建路由实例并传递上面路由对象routesconst router = createRouter({
//路由的一种前端展现方式,通常使用这个就行了history: createWebHistory(),routes}
)//定义前置路由守卫。进入某个页面之前需要干什么
router.beforeEach((to,from,next) => {console.log(to)console.log(from)
})

router.beforeEach((to, from, next) => {
//如果用户访问登录页,直接放行if(to.path == '/login') {return next()
}const token = '' //模拟token,正常是从本地cookie或localstorage中获取if (token) {return next() //如果有token,则正常跳转访问
} else {return next('/login') //如果没有token,跳转到登录页
}
})

一.全局守卫

1.全局前置守卫

语法:

 router.beforeEach((to,from,next)=>{})

参数说明:
to:进入到哪个路由去
from:从哪个路由离开
next:函数,决定是否展示你要看到的路由页面。

示例:
main.js 中设置全局守卫

  • 在main.js中,有一个路由实例化对象router。在main.js中设置守卫已是全局守卫。
  • 如下,判断to.path当前将要进入的路径是否为登录或注册,如果是就执行next(),展示当前界面。如果不是,就弹出alert,然后移至登录界面。
  • 这样就可实现,用户在未登录状态下,展示的一直是登录界面。

router.beforeEach((to,from,next)=>{if(to.path == '/login' || to.path == '/register'){next();}else{alert('您还没有登录,请先登录');next('/login');}})

http://www.ppmy.cn/news/1003704.html

相关文章

亚马逊、temu等跨境电商平台怎么通过自养号测评提升产品排名?

评论在卖家运营中的重要性无需我多言,大家都知道它对产品的销量和排名有着重要影响,那么,如何通过自养号测评提升销量和排名呢? 下面我将详细介绍一下: 稳定的测评环境系统: 选择一个稳定高效的测评环境…

微信小程序:点击按钮实现数据加载(带模糊查询)

效果图 代码 wxml: <!-- 搜索框--> <form action"" bindsubmit"search_all_productiond"><view class"search_position"><view class"search"><view class"search_left">工单号:</view…

SQL SERVER ROW_NUMBER、RANK、DENSE_RANK 分页应用

** ROW_NUMBER 、RANK、DENSE_RANK** ROW_NUMBER () over( order by 列) # 不论【列】是否存在重复&#xff0c; 序号都不会重复的&#xff0c;通常用唯一个标识的列 RANK() over(order by 列) # 列 存在重复&#xff0c; 则 顺序号一致&#xff0c; 两个人并列第一&#xff0c…

【css问题】flex布局中,子标签宽度超出父标签宽度,导致布局出现问题

场景&#xff1a;文章标题过长时&#xff0c;只显示一行&#xff0c;且多余的部分用省略号显示。 最终效果图&#xff1a; 实现时&#xff0c;flex布局&#xff0c;出现问题&#xff1a; 发现text-overflow: ellipsis不生效&#xff0c;省略符根本没有出现。 而且因为设置了 …

Python(六十三)获取字典视图

❤️ 专栏简介&#xff1a;本专栏记录了我个人从零开始学习Python编程的过程。在这个专栏中&#xff0c;我将分享我在学习Python的过程中的学习笔记、学习路线以及各个知识点。 ☀️ 专栏适用人群 &#xff1a;本专栏适用于希望学习Python编程的初学者和有一定编程基础的人。无…

spring AOP学习

概念 面向切面编程横向扩展动态代理 相关术语 动态代理 spring在运行期&#xff0c;生成动态代理对象&#xff0c;不需要特殊的编译器 Spring AOP的底层就是通过JDK动态代理或者CGLIb动态代理技术为目标Bean执行横向织入 目标对象实现了接口&#xff0c;spring使用JDK的ja…

AutoDL从0到1搭建stable-diffusion-webui

前言 AI绘画当前非常的火爆&#xff0c;随着Stable diffusion&#xff0c;Midjourney的出现将AI绘画推到顶端&#xff0c;各大行业均受其影响&#xff0c;离我们最近的AI绘画当属Stable diffusion&#xff0c;可本地化部署&#xff0c;只需电脑配备显卡即可完成AI绘画工作&…

Talk | ICCV‘23 华南理工大学林炜丰:视觉基础模型-尺度卷积调制遇上Transformer

本期为TechBeat人工智能社区第519期线上Talk&#xff01; 北京时间8月3日(周四)20:00&#xff0c;华南理工大学—林炜丰的Talk已准时在TechBeat人工智能社区开播&#xff01; 他与大家分享的主题是: “视觉基础模型-尺度卷积调制遇上Transformer”&#xff0c;他介绍了一种新的…