vue-router路由守卫

已于 2022-03-24 15:42:53 修改
阅读量658 收藏
点赞数
分类专栏： vue 文章标签： html 前端 javascript
于 2022-03-02 11:21:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54722719/article/details/123225902
版权

vue-router的生命周期
beforeEach 进入新路由之前执行
beforeResolve
afterEach 进入新路由之后执行
beforeRouteEnter 进入组件之前被调用
beforeRouteUpdate 不同路由组件被重复使用的时候被调用
beforeRouteLeave 离开该组件的时候被调用

  1. 路由守卫

    1. beforeEach，路由前置守卫，有三个参数，to,form,next
    2. beforeResolve，解析守卫，没有next参数
    3. afterEach，后置守卫

  2. 组件内路由守卫

    1. beforeRouteEnter，在导航确认前被调用，因此即将登场的新组件还没被创建，不能访问this，可以传一个回调给next来访问组件的实例，在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
    2. beforeRouteUpdate，在当前路由改变，但是该组件被复用时调用，this已经可以使用了，所以不支持传递回调
    3. beforeRouteLeave，导航离开该组件的对应路由时调用，通常用来禁止用户还未保存修改前突然离开。该导航可通过next(false)来取消

  3. 路由独享守卫
    beforeEnter，可以在路由配置上直接定义beforeEnter守卫

  4. 完整的导航解析流程

    1. 导航被触发
    2. 在失活的组件里调用beforeRouteLeave守卫
    3. 调用全局的beforeEach守卫
    4. 在重用的组件里 beforeRouteUpdate 守卫
    5. 在路由配置里调用 beforeEnter 守卫
    6. 解析异步路由组件
    7. 在被激活的组件里调用 beforeRouteEnter 守卫
    8. 调用全局的 beforeResolve 守卫
    9. 导航被确认
    10. 调用全局的 afterEach 组件
    11. 触发DOM更新
猪也是粉嘟嘟的
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解vue-router导航守卫
01-21
当做Vue-cli项目的时候需要在路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。 对此，vue-router 提供的 beforeEach可以方便地实现全局导航守卫（navigation-guards）。组件内部的导航守卫函数使用相同，只是函数名称不同（beforeRouteEnter 、beforeRouteUpdate(2.2 新增) 、beforeRouteLeave）。 钩子(Hook)，早期编程可能有个概念叫句柄，不知道将两者类比而且强行归为一类是不是合适。钩子的用处是在某个特定流程中的不同时机暴露出一些函数，使得用户可以通过覆写这些函数实现在原有位置执行自己的代码逻辑的功
vue中router.beforeEach() 的一个坑
weixin_43703816的博客
05-11 2548
vue中router.beforeEach() 的一个坑
使用router.beforeEach时,router.beforeEach执行了两次，导致meta中的数据出错
nihaotdb的博客
10-03 6851
报错: 看到这样的报错，我再meta那里查了很久，都没有找到原因，于是将关注点转移到router.brforeEach上。 router.beforeEach代码： 修改router.beforeEach的代码，并测试： 代码： 结果： a打印了两次，452行的from和453行的to的地址分别打印了两次 ，两次显示的地址不同，从图中可以看出，多了个item.path这个中间过渡的地址，那么，这个地址是怎么来的呢？（其中打印的2的影响不大），对此，我首先想到了，先...
vue router导航守卫（router.beforeEach()）的使用详解
12-01
导航守卫         导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。（记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察$route对象来应对这些变化，或使用beforeRouteUpdate的组件内守卫。） 好久没写一些东西了，总是感觉有啥缺少的。~~~~恰好碰到最近在写一个移动端项目，遇到了如何使同一个链接在不同条件下跳转到不同路由组件问题，譬如大家经常看到手机中没登录跳转登录页，登陆后跳转个人信息页等。废话不多说了，直接上图： 这是没登录状态，点击下面mine按钮跳转至登录页 这个是我登录
Vue Router 路由（路由守卫）---route
yiyueqinghui的博客
07-11 1万+
1、是什么 简单来说，导航守卫就是路由跳转前、中、后过程中的一些钩子函数，这个函数能让你操作一些其他的事儿，这就是导航守卫。 官方解释，vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。 2、导航守卫分类 导航守卫分为：全局的、组件内的、单个路由独享三种 2.1 全局的 指路由实例上直接操作的钩子函数，他的特点是所有配置路由的组件都会触发 const router = new VueRouter({ ... }) router.beforeEach((to, from, next
Vue-Router, 路由独享的守卫的使用 beforeRouteLeave
热门推荐
南思琼海
01-22 1万+
一些需求都可以通过阅读文档来解决,简单说下 组件内守卫 使用时 next() 方法使用的问题 官方文档 https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#全局后置钩子 beforeRouteLeave a 页面 b 页面 当从a页面 进入 b页面时， b页面做了一些操作， 在b页面判断离开时， //使用组件内...
vue router 组件内导航守卫 beforeRouteLeave用法，离开界面提示未保存
LPretty_Boy的博客
05-20 4422
1.在methods外面添加beforeRouteLeave方法 beforeRouteLeave(to, from, next) { console.log('beforeRouteLeave come in'); if(this.isSaved === false){ setTimeout(()=>{ this.$confirm('您还未保存页面内容，是否保存当前更改?', '提示', {
vue-router之 beforeRouteEnter
weixin_30741653的博客
11-14 310
beforeRouteEnter在每次路由切换都执行 ,而项目优化后,切换路由mounted只在最开始执行一次 beforeRouteEnter的具体用法可参考官方文档 https://cn.vuejs.org/v2/guide/migration-vue-router.html#activate-替换 需要注意的是： 在这期间路由跳转携带的数据发生改变会影响原数据，他们都指向同...
详解vue-router的导航钩子(导航守卫)
01-21
const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { ... ... }) 其中： to：将要访问的路径 from：代表从哪个路径跳转来的 next：是一个函数，表示放行。有如下几种调用方式
vue-router 实现导航守卫（路由卫士）的实例代码
12-04
导航守卫即是在路由跳转的时候，根据vue-router提供的导航守卫主要用来通过跳转或取消参数或查询的改变并不会出触发进入/离开的导航守卫 路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。 对此，vue-route...
vue-router之解决addRoutes使用遇到的坑
10-15
主要介绍了vue-router之解决addRoutes使用遇到的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
搭建Vue从Vue-cli到router路由护卫的实现
12-13
首先安装vue-cli mac: sudo npm install -g @vue/cli github: https://github.com/XinYueXiao/vue-routes 1、Vue-cli基础使用 1.1 创建测试项目 vue create vue-routes 1.2 创建成功,启动项目 yarn serve 在 ...
vue-router的路由守卫，router.foreEach()，router.beforeResolve()，router.afterEach()使用方法
qq_43305958的博客
08-29 1万+
@TOC 一、vue-router是什么？ Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式，在 IE9 中自动降级 自定义的滚动条行为 二、router.foreEach() 1.写在main.js文
Vue——路由守卫（全局前置路由守卫beforeEach、全局后置路由守卫router.afterEach、独享路由守卫beforeEnter、组件内路由守卫 ）
weixin_51351637的博客
09-22 1万+
作用：对路由进行权限控制分类：全局守卫、独享守卫、组件内守卫。
Vuerouter的beforeEach与afterEach钩子函数的区别
qq_40126542的博客
04-28 453
小编推荐：Fundebug提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大佬公司都在使用。 在路由跳转的时候，我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。 定义：路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。 总体来讲vue里面提供了三大类钩子，两种函...
Vue - vue-router - 路由守卫
qq_33962481的博客
12-24 1795
文章目录一、全局前置beforeEach1. 全局前置beforeEach2. 实现二、需求二三、全局后置守卫 afterEach1. 修改title为自己的title 一、全局前置beforeEach 当 Local Storage 里面存储的 name 是 zhangsan 的时候, 点击消息才显示消息内容 1. 全局前置beforeEach 给router添加一个路由守卫 beforeEach 语法 : router.beforeEach((to, from, next)=>{})
Vue-Router
张锦的博客
05-01 360
1、认识路由 1.1什么是路由？ 路由( routing )就是通过互联的网络把信息从源地址传输到目的地址的活动.---维基百科路由提供了两种机制：路由和转送。 （1） 路由是决定数据包从来源到目的地的路径。 （2）转送将输入端的数据转移到合适的输出端。 路由器中的路由表决定了数据包的指向。 1.2前端渲染和后端渲染 1.2.1网页的发展历史 （1）后端渲染阶段：jsp 是html+css+java的组合，用户请求服务端的数据的时候会将数据和html和css组合成网页，将该网页传递到前端浏
vue的路由-vue router（二）
nunumaymax的博客
04-07 425
全局守卫：beforeEach： 全局前置守卫；： 路由解析之前；afterEach： 全局后置守卫；单个路由独享守卫：：路由进入之前；组件级守卫：：路由进入之前；：路由更新之前；：路由离开之前。
【记录】Python3｜ 将 PDF 转换成 HTML/XML（✅⭐PyMuPDF+tqdm）
最新发布
qq_46106285的博客
05-07 331
和pdfminer.six转换结果类似，比pdfminer.six能提取出来的样式多了一丁点。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值