Vue80-全局路由守卫:前置、后置

一、路由守卫的定义

二、需求

在第三步,做校验!

三、代码实现

3-1、前置路由守卫

注意,此时就不能将router一开始就暴露出去了!

to和from是路由组件的信息。

写法一:

写法二:

缺点:若是路由判断很多,此写法会很繁琐。

写法三:路由元信息:程序员自定义的信息

放在需要校验的路由规则里面。

3-2、后置路由守卫

后置路由守卫一般是路由切换完成后再调用,做不了校验,所以好像没什么用。

1、需求

2、代码实现

写法一:

写了很多遍,不是很方便。

写法二:

四、小结

全局体现在:直接对话的是router!

前后置路由守卫,应该校验的是token!!!

相关推荐
小彭努力中13 分钟前
194.Vue3 + OpenLayers 实战:动态位置 + 高度 + 角度,模拟卫星地面覆盖范围
前端·css·vue.js·openlayers·animate
颜正义14 分钟前
作为前端你还不会 Playwright 进行单元测试吗?
前端·测试
孟陬15 分钟前
国外技术周刊 #3:“最差程序员”带动高效团队、不写代码的创业导师如何毁掉创新…
前端·后端·设计模式
张一凡9317 分钟前
easy-model -- "小而美"的React状态管理方案
前端·javascript·react.js
前端Hardy18 分钟前
纯 HTML/CSS/JS 实现的高颜值登录页,还会眨眼睛!少女心爆棚!
前端·javascript·vue.js
猪八宅百炼成仙1 小时前
解决Vue项目中scrollIntoView导致的布局异常问题
前端
miss1 小时前
Vue2 → Vue3 深度对比:8 大核心优化,性能提升 2 倍
前端·vue.js·架构
绝世唐门三哥2 小时前
React---数组浅拷贝之slice的使用
前端·reactjs
傅里叶2 小时前
Flutter开发的app,实现Google 登录
前端·flutter
angerdream2 小时前
最新版vue3+TypeScript开发入门到实战教程之生命周期函数
javascript·vue.js