vue 全局后置路由守卫router.afterEach

最新推荐文章于 2024-05-09 09:07:36 发布
最新推荐文章于 2024-05-09 09:07:36 发布
阅读量3.8k 收藏 2
点赞数 1
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MCCLS/article/details/119274159
版权

要点：

 

 

 

发现后置路由守卫在前置之后执行,并且发现next为undefined

 

 则后置守卫没有next因为它已经是在路由跳转后了没必要进行路由跳转的放行了

而后置路由守卫实现页签的改变

 我们先用js来实现

先在mate里面写上对应信息

这边我们写在了前置路由守卫里面

但发现有bug一开始打开的网页为undefined

 

 

 但是还有bug

因为是路径跳转前改变,所以当信息不对权限没通过,但是会发生网页页签的改变,

只有这样写,前置守卫才没有bug太麻烦

 

 而如果写在后置路由守卫那的话,因为后置路由守卫是跳转后再执行,也就是说一定已经通过了前置守卫的权限

 

兜里揣着星星
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue设置全局路由导航守卫
improvement
06-06 463
全局路由导航守卫 ​ 首先在 Login.vue 组件中，在登录事件触发时，保存token // 1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中 // 1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问 // 1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中 window.sessionStorage.setItem('token', res.data.token) //
vue Router 路由守卫之beforeEach
D321xiaoding的博客
11-29 749
首先使用 router.beforeEach 注册一个全局前置守卫： const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... }) 当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。 每个守卫...
全局后置路由守卫（afterEach）
weixin_47957908的博客
11-10 310
功能：每一次切换任意路由组件之后都会被调用，相当于在进入下一个路由组件之后设置一个权限。
vue router导航守卫（router.beforeEach()）的使用详解
12-01
导航守卫         导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。（记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察$route对象来应对这些变化，或使用beforeRouteUpdate的组件内守卫。） 好久没写一些东西了，总是感觉有啥缺少的。~~~~恰好碰到最近在写一个移动端项目，遇到了如何使同一个链接在不同条件下跳转到不同路由组件问题，譬如大家经常看到手机中没登录跳转登录页，登陆后跳转个人信息页等。废话不多说了，直接上图： 这是没登录状态，点击下面mine按钮跳转至登录页 这个是我登录
《Vue入门到精通系列之五》--- vue-router详解_vue-router beforeeach和aftereach(1)
最新发布
2301_82244509的博客
05-09 468
我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Vue——路由守卫（全局前置路由守卫beforeEach、全局后置路由守卫router.afterEach、独享路由守卫beforeEnter、组件内路由守卫 ）
weixin_51351637的博客
09-22 1万+
作用：对路由进行权限控制分类：全局守卫、独享守卫、组件内守卫。
router.afterEach()后置钩子用法
weixin_45266691的博客
01-12 1154
是 Vue Router 提供的全局后置钩子，用于在路由切换之后执行一些逻辑。与beforeEach钩子不同，afterEach不需要调用next函数，因为它是在导航已经确认的情况下执行的。通常，afterEach钩子用于执行一些与路由切换后的全局状态或行为相关的操作。
router.afterEach()
seimeii的博客
08-10 1839
router.afterEach()
vue router.beforeEach()，详解
wwf1225的博客
11-23 2330
https://blog.csdn.net/heshuaicsdn/article/details/88020796 vue router.beforeEach()，详解 router.beforeEach（）一般用来做一些进入页面的限制。比如没有登录，就不能进入某些页面，只有登录了之后才有权限查看某些页面。。。说白了就是路由拦截。 第一步 规定进入路由需不需要权限 @/router/index.js import A from '@/components/a' { path:.
vue-router之路由钩子函数应用解析
kirinlau的专栏
01-17 1741
组件在创建时会触发created，但是每次进入路由时都会触发beforeRouteEnter，所以，当一个页面使用了keep-alive进行了缓存时，离开这个页面后再次进入时，不会再触发created，但是会触发beforeRouteEnter，这时候就可以使用路由钩子进行处理了。beforeEach的钩子函数，它是一个全局的before 钩子函数，beforeEach在每次每一个路由改变的时候都得执行一遍。这就是vue-router钩子函数的基础应用，当然还有很多其他的应用角度。
router路由守卫，前置路由守卫，后置路由守卫，都享路由守卫，组件路由守卫，auth路由设置是否需要登录，路由工作模式history模式和hash模式的理解
艾米的猫儿的博客
11-19 913
1.全局前置路由守卫 废话得听： 路由跳转之前执行 有三个返回参数 to, from, next router.beforeEach((to, from, next) => { console.log(to,from) next() // 放行可以可以跳转的意思 }) 2.全局后置路由守卫 废话得听： 路由跳转之前执行，后置路由守卫没有next 只有to from router.afterEach((to, from) => { console.log(to,fro.
vue-router
da_da_jiege123的博客
10-27 70
router.beforeResolve 在所有导航守卫结束后，路由解析之前，而且返回的是true(返回false不会触发)，才会触发这个钩子。router.afterEach 在路由解析之后(那些守卫),触发。
Vue2.X的路由和钩子函数
settingSun66的博客
05-29 1万+
最近上班有些忙，好久没有更新文章，也没学习新的东西。 今天来说说这个路由钩子吧。 各位朋友帮我点点关注啊顺便来个666。 导航和钩子函数： 导航：路由正在发生改变   关键字：路由  变 钩子函数：在路由切换的不同阶段调用不同的节点函数（钩子函数在我看来也就是：某个节点和时机触发的函数）。 钩子函数   主要用来拦截导航，让它完成跳转或取消，在导航的
Vue-Router 各个钩子介绍
weixin_45416189的博客
03-30 2306
Vue-Router 参数或者查询的改变并不会触发进入/离开的导航守卫，可以通过观察$route对象来应对这些变化，或者使用beforRoute的组件内守卫 全局前置守卫 router.beforeEach 注册全局前置守卫 cosnt router = new VueRouter({...}) router.beforeEach((to,from,next)=>{ //... }) 当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行的，此时导航在所有守卫resolve完之
Vue Router 路由（路由守卫）---route
热门推荐
yiyueqinghui的博客
07-11 1万+
1、是什么 简单来说，导航守卫就是路由跳转前、中、后过程中的一些钩子函数，这个函数能让你操作一些其他的事儿，这就是导航守卫。 官方解释，vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。 2、导航守卫分类 导航守卫分为：全局的、组件内的、单个路由独享三种 2.1 全局的 指路由实例上直接操作的钩子函数，他的特点是所有配置路由的组件都会触发 const router = new VueRouter({ ... }) router.beforeEach((to, from, next
小白VUE学习笔记1：Vue:router的beforeEach与afterEach钩子函数
爱吃牛肉的政
11-22 476
在路由跳转的时候，有时候需要一些权限判断或者其他操作。这时需要使用路由的钩子函数。 定义：路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。 总体来讲vue.router里面提供了三大类钩子，两种函数 1、全局钩子 2、某个路由的钩子 3、组件内钩子 两种函数： 1、Vue.beforeEach(function(to,form,next){}) /在跳转之前执行/ 2.Vue...
Vue中router的beforeEach与afterEach钩子函数
做最有意义的事情，成就最有价值的梦想，展现最真实的自己 . 超越自己，改变世界 .
06-01 790
在路由跳转的时候，我们需要一些权限判断或者其他操作，这个是后就需要使用路由的钩子函数了。 定义：路由钩子主要的作用是给使用者在路由发生变化时进行一些特殊的处理而定义的函数 两种函数： 1.Vue.beforeEach((to,form,next)=>{})在跳转之前执行 2.Vue.afterEach((to,form)=>{})在跳转之后执行 beforeEach函数中的3个参数： to:router即将进入的路由对象 from:当前导航即将离开的路由 next()：进行管子中
vue（路由router、路由传参、嵌套、路由守卫）
m0_66970189的博客
06-29 671
注意 这样就可以在打开页面时，显示我们想要默认显示的组件了。一般我们在写app时用hash，在操作后台管理时用history比较多路由传参有两种方式，一种是query，一种是params 我们想要获取拼接的内容时，在定义的组件中使用mounted钩子，就可以通过获取到此条路由上的参数，就能找到对应的query中的参数 params 在配置路由规则中，在path后面通过的形式，将我们需要的参数进行设置，这里相当于函数中的一个形参，接着再router-link标签的to属性中进行拼接,，这样就将参数传好了。
路由守卫详细讲解
m0_72642533的博客
02-09 1511
路由守卫：全局前置守卫、全局后置守卫、组件内部守卫、组件独享守卫
router.beforeEach和 router.afterEach区别
08-19
`router.beforeEach` 和 `router.afterEach` 是 Vue Router 提供的两个路由导航守卫钩子函数，它们在路由导航过程中起到不同的作用。 1. `router.beforeEach`： - 作用：在每次路由切换之前执行，用于进行全局的前置拦截。 - 使用场景：可以用于进行用户身份验证、路由权限控制等操作，例如检查用户是否登录，如果未登录，则重定向到登录页面。 2. `router.afterEach`： - 作用：在每次路由切换之后执行，用于进行全局的后置处理。 - 使用场景：可以用于进行页面切换后的一些操作，例如页面埋点统计、滚动行为控制等。 两者的区别主要在于执行的时机和目的： - `beforeEach` 在路由切换之前执行，可以对即将进入的路由进行拦截和处理。 - `afterEach` 在路由切换之后执行，可以对已经进入的路由进行处理。 示例代码如下： ```javascript import Vue from 'vue'; import Router from 'vue-router'; Vue.use(Router); const router = new Router({ routes: [ // 路由配置... ] }); router.beforeEach((to, from, next) => { // 路由切换之前的处理逻辑 // 比如进行用户身份验证、权限控制等 // 验证通过，继续路由切换 next(); }); router.afterEach((to, from) => { // 路由切换之后的处理逻辑 // 比如埋点统计、滚动行为控制等 }); export default router; ``` 在这个例子中，beforeEach` 路由守卫用于进行用户身份验证或权限控制，如果验证通过，则调用 `next()`

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值