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

一、路由守卫的定义

二、需求

在第三步,做校验!

三、代码实现

3-1、前置路由守卫

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

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

写法一:

写法二:

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

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

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

3-2、后置路由守卫

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

1、需求

2、代码实现

写法一:

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

写法二:

四、小结

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

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

相关推荐
前端炒粉几秒前
AntD Upload + React Uploady + 分片上传 + 断点续传 + 心跳机制(面试及代码)
前端·react.js·前端框架
阿珊和她的猫2 分钟前
浏览器跨页签数据共享方案
前端·javascript·vue.js·chrome
Su米苏3 分钟前
在 Vue3 + Vite 项目里,动态路由一般有 3 种常见场景
前端
xkxnq3 分钟前
第六阶段:Vue生态高级整合与优化(第82天)(Pinia高级用法)持久化方案(pinia-plugin-persistedstate)+ 安全存储策略
前端·vue.js·安全
前端 贾公子8 分钟前
React 和 Vue 都离不开的表单验证库 async-validator 之策略模式的应用 (中)
前端
郑州光合科技余经理8 分钟前
从零到一:构建UberEats式海外版外卖系统
java·开发语言·前端·javascript·架构·uni-app·php
强子感冒了15 分钟前
JavaWeb学习笔记:动静态Web、URL、HTTP
前端·笔记·学习
RunsenLIu17 分钟前
基于 Spring Boot 3 与 Vue 3 的家校互动平台
vue.js·spring boot·后端
前端 贾公子19 分钟前
React 和 Vue 都离不开的表单验证库 async-validator 之策略模式的应用 (上)
vue.js·react.js·策略模式