vue 的路由导航守卫扩展

最新推荐文章于 2024-07-19 10:30:06 发布
最新推荐文章于 2024-07-19 10:30:06 发布
阅读量56 收藏
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ch2362710931/article/details/124558583
版权

路由导航守卫扩展

我理解的导航守卫 就是一座房子的保安 只有保安允许了才能访问页面

之前说三种六个 还有一个用的不是很多的全局守卫 叫做全局解析守卫 beforeResolve

导航守卫一共有三种
全局的守卫 守卫所有的页面
beforeEach 路由前置守卫
beforeResolve 路由解析之前
afterEach 路由离开

全局守卫 beforeEach 和 beforeResolve
他们两个都会在路由跳转前就执行 参数都是 to from next
他们两个的区别 执行的时机不一样 beforeEach 是在路由规则被循环之前执行
beforResolve 是在组件被解析之后调用 beforeEach 要比 beforResolve 先执行

组件守卫 守卫单个组件
beforeRouteEnter 路由进入
beforeRouteUpdate 路由更新
beforeRouteLeave 路由离开

独享守卫 守卫单个页面
beforeEnter 路由进入之前

三种守卫组件 全局 独享守卫的区别

  1. 作用范围不同 全局作用于所有页面 组件作用于单个组件 独享也是守卫单个页面
  2. 代码写的位置不一样 全局守卫写在 router/index.js 中 组件守卫写在组件里 跟 data 同级 独享守卫写在路由规则里
  3. 执行顺序有区别 执行的顺序要记下来
    beforeEach 前置守卫
    beforeEnter 独享守卫
    beforeRouteEnter 组件守卫
    beforeResolve 解析守卫
    afterEach 路由后置守卫
若枫~~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue路由守卫与axios拦截器的对比
weixin_46285310的博客
08-29 1517
1 分类 路由守卫：全局路由守卫，路由独享守卫，路由组件内守卫 拦截器：请求拦截器(request)，响应拦截器(response) 2 作用 路由守卫作用： 先说我的理解，路由守卫类似一个安保系统，要向进入园区，必须经过安保的同意，同意了就放行，继续操作，那么路由守卫也是一样的 拦截器的作用： 我的理解是拦截请求和响应，比如在登录一个页面的时候，当用户不输入密码或者输入错误，或者想要跳过这步操作，就会进行拦截，让你进行一个登录的操作，当然重定向也可以实现 共同点：都是对操作进行防护，都类似
vue路由导航守卫
最初的梦想
09-05 2533
文章目录一、基础介绍二、7个导航守卫函数介绍三、导航守卫使用方法四、导航解析流程总结 一、基础介绍 导航守卫一共有7个函数，这几个函数中除了afterEach函数没有next，只有to，from两个参数。其余几个函数都是由3个参数to、from、next。 to：即将进入的目标路由 from：即将离开的路由 next：它是一个函数，一定要调用这个函数来resolve钩子函数。一定要确保调用了ne......
vue2.0 实现导航守卫（路由守卫）
12-12
路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。 对此，vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫（navigation-guards）。 导航守卫（navigation-guards）这个名字，听起来怪怪的，但既然官方文档是这样翻译的，就姑且这么叫吧。 贴上文档地址：https://router.vuejs.org/zh-cn/advanced/navigation-guards.html 全局守卫 你可以使用 router.beforeEach 注册一个全局前置守卫： const router = new VueRouter({ ...
路由导航守卫扩展
weixin_63722092的博客
04-27 245
我理解的导航守卫 就是一座房子的保安 只有保安允许了才能访问页面 之前说三种六个 还有一个用的不是很多的全局守卫 叫做全局解析守卫 beforeResolve 导航守卫一共有三种 全局的守卫 守卫所有的页面 beforeEach 路由前置守卫 beforeResolve 路由解析之前 afterEach 路由离开 全局守卫 beforeEach 和 beforeResolve 他们两个都会在路由跳转前就执行 参数都是 to from next 他们两个的区别 执行的时机不一样 before
【vue】vue2.0导航钩子beforeEach的使用
LuviaWu的博客
12-14 1289
vue-router作为vue里面最基础的服务,学习一段时间,对遇到的需求进行一些总结 使用vue-cli作为开发前提 vue-router已经配置好了 路由写法 routes: [ { path: '/cart', name: 'cart', component: cart, // 或 component: resolve => require(['../view...
beforeRouteEnter方法
热门推荐
菜鸟黑一枚
12-24 4万+
当从表单页面跳转到详情页面做一些操作后，需要返回定位到原先表单的页面。此时路由跳转需要做一些判断就要用到beforeRouteEnter方法 <template> <div class="content-container opinion-container"> <div class="content-tool"> <el-fo...
Vue路由守卫及页面登录权限控制的设置方法(两种)
10-15
总结一下，Vue路由守卫提供了一种灵活的方式来拦截和控制路由导航，实现页面登录权限控制。通过结合使用`sessionStorage`存储的登录状态和路由元信息，我们可以确保只有已登录的用户才能访问特定的页面。这种方法...
vue实现路由切换改变title功能
10-16
`vue-router`提供了导航守卫这一特性，使得我们能够方便地实现在路由变化时更新页面标题。本篇文章将详细介绍如何在Vue中实现这一功能。 首先，我们需要理解Vue项目的结构和Vue-router的基本用法。Vue项目通常只有...
详解如何写出一个利于扩展的vue路由配置
10-16
本文将深入探讨如何编写一个易于扩展的Vue路由配置。 首先，了解基础的Vue Router配置。在创建Vue Router实例时，我们需要定义路由组件并指定它们的路径。例如： ```javascript import Vue from 'vue' import Vue...
vue路由结构可设一层方便动态添加路由操作
11-19
总结来说，Vue Router 提供了强大的动态添加路由功能，通过 `addRoutes` 方法可以在运行时扩展路由配置。在处理多层路由嵌套时，应保持路由结构清晰，以便于管理和维护。同时，利用路由守卫和 `replace` 方法，我们...
深入理解vue路由的使用
12-11
Vue Router 提供了动态路由匹配、导航守卫、懒加载等功能，使得在 Vue 应用中管理组件间的导航变得简单而直观。 在传统的多页面应用中，页面间跳转通常是通过超链接完成。而在 Vue Router 的单页面应用中，路径的...
vue2.0_路由守卫——登录权限设置（ 以vue router.beforeEach()为例 ）
QiuRenBB的博客
02-18 6283
前言： 什么是路由守卫？   官方的说法：   导航守卫(路由守卫)主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的、单个路由独享的、或者组件级的。   我方的说法：   路由守卫是指对路由跳转前做一些验证或者说操作一些事儿，目的是为了实现某些效果。比如没有登录的情况下，就不能进入到首页或者其它页面，只有登录了之后才有权限进入。简单讲就是路由拦截 、设置权限。 讲解前：为了方便理解，我先贴一张钩子函数的执行顺序图。先讲解一下路由守卫的组成和各个钩子的理解与应用，登录权限设置放在最后
beforeEach的深入研究，及beforeEach和beforeRouteEnter区别？
weixin_30266885的博客
12-27 1124
之前一直困惑它俩的区别，也没找到合适的文档，直到有天看到一篇博客，一起来学习下： 之前是在created钩子函数里面，发现这是在今天当前页面之后了。先回顾一下钩子函数beforeEach const router = new VueRouter({}) router,beforeEach((to,from,next) =>{ const {auth = true } =meta // me...
路由守卫&导航解析流程
qq_20623665的博客
12-10 220
举例子：我想进小区(个人信息)，门卫（导航守卫）会检查我有没有做核酸(是否登录)，如果做了就让我进去（跳转个人信息）。有的页面需要满足条件才能跳转，例如购物车页面就需要用户登录才可以跳转)例如很多页面跳转需要登录判断，如果你有登录，则跳转到指定页面，没有登录则跳转到登录页面。判断用户有没有token， 有token， 直接放行 （有身份的人，想去哪就去哪~）否则，无token（游客），且在访问需要权限访问的页面，直接拦截到登录。没有token（游客），如果是白名单中的页面，直接放行。什么是路由导航守卫？
路由导航守卫/路由拦截/导航守卫
iseyre的博客
12-29 851
目录 导航守卫： 全局守卫 组件守卫： 独享守卫 导航守卫： 又称：路由导航守卫、路由拦截都是一样的 分为全局守卫、组件守卫、独享守卫 全局守卫 写在路由页面，写在const router同级之下 const router = new VueRouter({ routes }) //全局守卫写在这里 全局守卫又分为：前置守卫：router.beforeEach 和后置钩子：router.afterEach 前置守卫常用于登录验证：如下 //全局守卫 rout.
vue导航守卫详解(面试) beforeEach（），beforeRouteEnter（）
admin12345671的博客
03-31 1770
vue导航守卫详解 概念 导航守卫又称路由守卫，实时监控路由跳转时的过程，在路由跳转的各个过程执行相应的操作，类似于生命周期函数，在开发过程中经常被使用，比如用户点击一个页面，如果未登录就调到登录页面，已登录就让用户正常进入。 分类 全局路由一共分为三类：全局守卫，路由独享的守卫，组件内的守卫。 一、全局守卫 全局守卫有三种： 1.router.beforeEach（全局前置守卫） 2.router.beforeResolve（全局解析守卫） 3.router.afte
使用Vue实现点击页面触发特效
最新发布
qq_45569925的博客
07-19 727
在页面上的指定区域内进行点击，则会在页面上显示设置好的随机文本，此文本出现后会执行动画，动画效果为节点在1s之内向右上方移动并在移动的过程中完成180°翻转，最后消失。
vue路由怎么做权限控制
08-31
2. 创建路由导航守卫：在Vue中，可以使用全局前置守卫(router.beforeEach)来进行路由的权限控制。在全局前置守卫中，可以获取到当前路由的meta信息，并根据用户的权限进行判断。 3. 判断用户权限：在全局前置守卫中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值