什么是路由守卫？vue-router有哪几种路由守卫？

什么是路由呢？

路由其实是一种映射关系。

生活中的路由：设备和ip的映射关系；

node.js路由：接口和服务的映射关系；

（前端）Vue中的路由：路径和组件的映射关系。

路由守卫的使用场景？

首先，如何给路由添加一个权限判断呢？例如，用户在登录的状态下就能去到某页面，但是未登录则给你弹出一个未登录的提示。

路由守卫的目标是实现这样一个权限判断，在路由跳转之前，会触发一个函数.

//语法：router.beforeEach((to,from,next) => {}let isLogin = false; //未登录
router.beforeEach((to,from,next) => {
//路由跳转“之前”先执行这里，决定是否跳转
if (to.path === '/yourLogin' && isLogin === false) {
alert("请登录”)
next(false) //阻止路由跳转
}else {
next() //正常放行
}
})

参数1（to）：要跳转到的路由（路由对象信息）目标

参数2（from）：从哪里跳转的路由（路由对象信息）来源

参数3 （next）：函数体必须要next()才会让路由正常地跳转和切换，next(false)在原地停留，next(“强制修改到另一个路由路径上”

注意：如果不调用next，那么页面会留在原地

全局路由在真正跳转之前，会执行一次beforeEach函数，next调用则跳转，也可以强制修改要跳转的路由。

什么是路由守卫呢？

如果在面试中被问到了这个，比较完美的答案如下：

路由守卫又称导航守卫，指是路由跳转前、中、后过程中的一些钩子函数。官方解释是vue-router提供的导航守卫，要通过跳转或取消的方式来守卫导航。路由守卫分为三种，全局路由、组件内路由，路由独享。

全局路由钩子函数有：beforeEach、beforeResolve、afterEach（参数中没有next）

组件内路由的钩子函数有：beforeRouterEnter、beforeRouteUpdate、beforeRouteLeave

路由独享的钩子函数有：beforeEnter

什么是路由守卫？vue-router有哪几种路由守卫？相关推荐

vue router返回到指定的路由
vue router返回到指定的路由一.项目场景二.问题描述三.原因分析四.解决方案一.项目场景项目场景:示例:A(商品详情)--B(商品购买页面)-C(支付成功页面)--D(订单页面) ...
Vue Router系列之详解路由守卫
文章の目录 1.路由守卫是什么 2.导航守卫分类 2.1.全局守卫 2.1.1.全局前置守卫beforeEach 2.1.2.全局解析守卫beforeResolve(2.5.0 新增) 2.1.3.全 ...
已解决vue-router4路由报“[Vue Router warn]: No match found for location with path“
vue-router4动态加载的模式下,当我们在当前页面刷新浏览器时,会出现一个警告 [Vue Router warn]: No match found for location with path ...
VueJS 官方路由之 Vue Router
文章目录参考描述 Vue Router 获取 npm yarn 依赖问题使用 router-link router-view 配置路由插件基本结构子组件导入需要进行路由匹配的组件定义路由 ...
Vue源码 Vue Router（三）matcher 路由匹配器
Vue源码 Vue Router(三)matcher Vue源码 Vue Router(三)matcher matcher createMatcher addRoutes match 总结单步调试参 ...
vue router连续点击多次路由报错根本原因和解决方法
原因: vue-router 升级到 3.1.x 后,重复点击导航时,控制台出现报错 ,vue router ≥ v3.1 后 ,回调形式改成 promise api 了,返回的是 promise,如 ...
vue router连续点击多次路由报错
在编程式导航跳转时候,连续点击多次会报NavigationDuplicated错误 this.$router.push({name: "search"}); 出现这种错误原因是因为 ...
Vue2.x - Vue Router
目录 Vue与SPA 什么是SPA 简单了解SPA 什么是MPA SPA相较于MPA的优点实现SPA的几个关键点理解SPA单页面架构什么是前端路由锚链接与URL中的hash值通过hashch ...
Vue学习笔记（六）--- 前端路由 Vue Router
一.路由 1.概念路由本质上来说就是一种对应关系,比如说我们在浏览器中输入不同的 url 地址,我们就能访问不同的资源,那么这 url 地址与资源之间的对应关系,就是路由. 2.分类 ① 后端路 ...
Vue Router 路由管理
文章目录 Vue Router 路由管理概述安装简单使用定义2个组件定义路由信息支持路由使用路由动态路由配置动态路由配置404 限制动态参数嵌套路由命名路由编程式导航简单使 ...

什么是路由守卫？vue-router有哪几种路由守卫？

什么是路由守卫？vue-router有哪几种路由守卫？相关推荐

最新文章

热门文章