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

一、路由守卫的定义

二、需求

在第三步,做校验!

三、代码实现

3-1、前置路由守卫

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

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

写法一:

写法二:

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

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

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

3-2、后置路由守卫

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

1、需求

2、代码实现

写法一:

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

写法二:

四、小结

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

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

相关推荐
u01040583617 分钟前
构建可扩展的Java Web应用架构
java·前端·架构
swimxu1 小时前
npm 淘宝镜像证书过期,错误信息 Could not retrieve https://npm.taobao.org/mirrors/node/latest
前端·npm·node.js
qq_332394201 小时前
pnpm的坑
前端·vue·pnpm
雾岛听风来1 小时前
前端开发 如何高效落地 Design Token
前端
不如吃茶去1 小时前
一文搞懂React Hooks闭包问题
前端·javascript·react.js
冯宝宝^1 小时前
图书管理系统
服务器·数据库·vue.js·spring boot·后端
alwn1 小时前
新知识get,vue3是如何实现在style中使用响应式变量?
前端
来之梦1 小时前
uniapp中 uni.previewImage用法
前端·javascript·uni-app
野猪佩奇0072 小时前
uni-app使用ucharts地图,自定义Tooltip鼠标悬浮显示内容并且根据@getIndex点击事件获取点击的地区下标和地区名
前端·javascript·vue.js·uni-app·echarts·ucharts
2401_857026232 小时前
拖动未来:WebKit 完美融合拖放API的交互艺术
前端·交互·webkit