当前位置: 首页 > news >正文

vue中关于router.beforeEach()的用法

router.beforeEach()是Vue.js中的路由守卫,用于在路由跳转前进行校验、取消、重定向等操作。

基本使用:

const router = new VueRouter({ ... })router.beforeEach((to, from, next) => {// ...
})

to: 即将要进入的目标路由对象

from: 当前导航正要离开的路由

next: 必须调用该方法来 resolve 这个钩子。它接受三个参数:

true: 进行管道中的下一个钩子,如果全部钩子完成,则导航会被确认。

false: 中断当前的导航。如果目标路由是一个重定向,那么会跳转到重新定向的路由。

(path|route object): 进行一个新的导航到一个不同的地址,这时候需要提供一个路径或者一个路由对象。

实例代码:

router.beforeEach((to, from, next) => {if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {next({ path: '/login', query: { redirect: to.fullPath }})} else {next()}
})

这个例子中,如果用户没有登录,并且目标路由需要认证,那么用户会被重定向到登录页面,并且登录完成后会被重定向到原先想要访问的页面。

使用next传递参数:

router.beforeEach((to, from, next) => {if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {next({ path: '/login', query: { redirect: to.fullPath }})} else {next()}
})

在这个例子中,如果用户尝试访问一个需要认证的页面,但是没有认证,那么用户会被重定向到登录页面,并且带上原先想要访问的页面的路径。

使用next(false)取消导航:

router.beforeEach((to, from, next) => {if (to.name !== 'Login' && !isAuthenticated) {next(false)} else {next()}
})

在这个例子中,如果用户没有登录,并且尝试访问非登录页面,则会取消当前的导航。

使用next('/path')进行重定向:

router.beforeEach((to, from, next) => {if (to.name === 'Admin') {next('/home')} else {next()}
})

在这个例子中,如果用户尝试访问名为'Admin'的页面,则会被重定向到'/home'。

以上就是关于router.beforeEach()的几种常见用法,它是Vue.js路由守卫中的一个重要部分,可以用于处理各种路由守卫的需求。

http://www.lryc.cn/news/460449.html

相关文章:

  • C++模板初阶,只需稍微学习;直接起飞;泛型编程
  • 【数据结构 | 红黑树】红黑树的性质和插入结点时的调整
  • mysql学习教程,从入门到精通,SQL导入数据(44)
  • 【SpringAI】(二)让你的Java程序接入大模型——适合Java宝宝的大模型应用开发
  • 音频剪辑在线工具 —— 让声音更精彩
  • ​http短连接和长连接​
  • 日志分析删除
  • DART: Implicit Doppler Tomography for Radar Novel View Synthesis 笔记
  • redis-cli执行lua脚本
  • MySQL9的3个新特性
  • 《网络基础之 HTTP 协议:状态码含义全解析》
  • java真的正在越来越失去竞争力了吗
  • 【通过zip方式安装mysql服务】
  • 每日OJ题_WY3小易的升级之路_数学模拟_C++_Java
  • python xml的读取和写入
  • WebGL 小白入门学习
  • OSI七层协议
  • 超平面(Hyperplane)和半空间(Halfspace)
  • TCP(Transmission Control Protocol,传输控制协议)整理
  • R语言绘制线性回归图
  • C++进阶:map和set的使用
  • 深入理解C++ STL中的 vector
  • MySQL 安装与配置详细教程
  • 理解智能合约:区块链在Web3中的运作机制
  • QT工程概述
  • redis安装 | 远程连接
  • 性价比高的宠物空气净化器应该怎么挑?有哪几款推荐?
  • Golang | Leetcode Golang题解之第466题统计重复个数
  • 设计模式 - 行为模式
  • InstructGPT的四阶段:预训练、有监督微调、奖励建模、强化学习涉及到的公式解读