beforeRouteEnter组件独享守卫注意点儿

最新推荐文章于 2023-06-29 10:03:16 发布
最新推荐文章于 2023-06-29 10:03:16 发布
阅读量501 收藏
点赞数
分类专栏： 知识累积 个人项目 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/agua001/article/details/109156249
版权

刚开始可能会遇到：
在这里插入图片描述
页面是这样写的
在这里插入图片描述
因为当beforeRouteEnter钩子执行前，组件实例还没被创建，vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。
正确写法：
在这里插入图片描述
补充：
后面真正实现功能的时候发现，钩子执行顺序是created => beforeRouteEnter , 所以在beforeRouteEnter拿到的数据不能用于created中，我们直接在beforeRouteEnter 调用即可，如：
在这里插入图片描述

我们都是小可爱，惹惹惹

心若向阳(*￣︶￣)
关注
专栏目录
Vue——组件内部守卫，全局守卫，路由独享守卫
chengzhangdewo的博客
10-14 1401
组件内部守卫 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D
Vue路由中3种常见导航守卫：全局守卫，独享守卫，组件内守卫
weixin_44781409的博客
05-31 4835
正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。 记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。 1. 全局前置守卫 你可以使用 router.beforeEach 注册一个全局前置守卫： 当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resol
Vue中组件内导航守卫（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave）
Mr-yang的随笔
07-21 1187
在组件中使用路由守卫: beforeRouteEnter (to, from, next) { // 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例 if(userData.status == 0){//userData为接口返回数据。 next(vm => { vm.$message.warning({ showClose: true, message: '不符合
Vue生命周期和beforeRouteEnter()/beforeRouteLeave()函数
zhiyun_li1的博客
04-23 1248
找到Vue.js 的官网，简直都是自己陌生的各种语法函数，（下面总结了一下常用的） 先参考vue官网从简单的看起！先了解下vue的生命周期。 2、也许我们从上图中并不能直观的看出生命周期中的函数的具体使命，先简短的用文字了解下： beforeCreate():实例在内存中被创建出来，还没有初始化好data和methods属性。 create():实例已经在内存中创建，已经初始化好data和method，此时还没有开始编译模板。 beforeMount():已经完成了模板的编译，还没有挂载到页面中。 mou
vue路由（十二）路由独享守卫beforeEnter和页面内组件路由守卫：beforeRouteEnter，beforeRouteLeave，beforeUpdate
jieweiwujie的博客
09-13 4388
路由独享守卫beforeEnter和页面内组件路由守卫
Vue 学习随笔系列五 -- 路由守卫 beforeRouteEnter 的使用
最新发布
mm_0123456789的博客
06-29 1万+
beforeRouteEnter 函数内部不能使用 this，这是因为在执行路由钩子函数beforRouteEnter时候，组件还没有被创建出来；next – 下一步，若无指定跳转的路由，设置为空 next() 即可。to – 即将要跳转到的页面。form – 跳转前的页面。
vue 路由监听的方式
热门推荐
千里之行，始于足下！
12-29 3万+
在开发vue项目的过程中，经常会对某些页面或全局项目的路由进行监听，当路由发生变化的时候去执行某些操作，下面是对监听路由的几种方式的总结 目录路由监听方式1： 通过 watch 进行监听路由监听方式2：通过钩子函数 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave进行监听路由监听方式3：全局路由监听 this.$router.beforeEach 路由监听方式1： 通过 watch 进行监听 // 方式1、监听路由 $route 变化 export .
Vue路由守卫之路由独享守卫
10-16
Vue Router 提供了多种类型的路由守卫，包括全局前置守卫、组件内守卫和路由独享守卫。在本例中，我们将重点讨论路由独享守卫 `beforeEnter`。 `beforeEnter` 是一个可以在路由配置中直接定义的守卫函数，用于在...
导航守卫分类（全局守卫、路由独享守卫、组件内的守卫）
qq_41716608的博客
03-08 989
导航守卫分类：（共三大类） 需求： vue项目中经常在路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。 全局守卫： 全局前置守卫： 当一个导航触发时，全局前置守卫(在进入组件之前)按照创建顺序调用。 vue-router 提供的 router.beforeEach（(to，from，next)=>{}）可以方便地实现全局前置导航守卫 to：即将要进入...
Vue项目中常见问题(60)用户登录后路由问题(路由独享守卫与组件内守卫)
qq_46368050的博客
05-26 678
目录 gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master 业务需求: 路由独享守卫 只有从购物车界面shopcart才能跳转到交易页面(创建订单)trade 只有从交易页面(创建订单)trade页面才能跳转到支付页面pay 组件内守卫 只有从支付页面pay才能跳转到支付成功页面paysuccess gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commi..
vue路由守卫 —— 组件内beforeRouteEnter
老君的博客
06-03 3364
beforeRouteEnter 在渲染该组件的对应路由被确认前调用，用法和参数与beforeEach类似，next需要被主动调用 注意： 此时组件实例还未被创建，不能访问this 可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数 beforeRouteEnter(to, from, next) { console.log(this); // 这里打印this是undefined console.log(to, '参数1:即将要进入的目标
【vue-组件中路由生命周期beforeRouteEnter】
weixin_47416539的博客
07-18 495
代码】【vue-组件中路由生命周期beforeRouteEnter】
vue组件的路由钩子函数beforeRouteEnter，局部拦截
周凤伟的博客
02-07 2580
beforeRouteEnter beforeRouteEnter 函数内部 this 是undefined，因为在执行路由钩子函数beforRouteEnter时候，组件还没有被创建出来；先执行beforRouteEnter，再执行组件周期钩子函数beforeCreate。我们可以通过 next 获取组件的实例对象，如：next( (vm)=>{} )，参数vm就是组件的实例化对象。 &l...
关于vue中beforeRouteEnter使用的误区
GuoZebin的博客
10-23 2万+
在写项目的时候偶然遇到了一个问题，在进入一个城市选择页面时，城市列表总是需要一秒后才能加载出来，出现了页面抖动，在解决这个问题时想到了路由中的beforeRouteEnter方法，在路由跳转前加载数据，在网上发现有博客说可以使用如下写法来解决这个问题： 这样写是毫无效果的， 经过仔细分析官方文档后发现next中的函数执行在页面mounted之后，所以这种方法时是不正确的。还不如直接将数据获取...
beforeRouteLeave在子组件中没有生效
Liu_Jun_Tao的博客
04-10 1万+
考虑这么一种情况，在页面中存在父子组件，当需要离开当前页面时，要触发某个子组件中的事件。 这里尝试了两种方式： 1.添加路由守卫 在子组件的.vue文件中，使用beforeRouteLeave钩子，然而并没有触发。debug测试发现，在父组件中添加的beforeRouteLeave可以触发。 2.使用beforeDestory钩子 子组件使用beforeDestory钩子，当离开页面时，...
【Vue】22.vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave)
返璞归真
04-29 3964
一.beforeRouteEnter(to, from, next) beforeRouteEnter函数内部this是undefined，这是因为在执行路由钩子函数beforeRouteEnter时候，组件还没有创建出来；先执行beforeRouteEnter，再执行组件周期钩子函数beforeCreate。我们可以通过next获取组件实例对象，如：next((vm) => {});参数...
Vue.js组件内路由守卫钩子beforeRouteEnter
weixin_38974419的博客
01-22 812
beforeRouteEnter：路由跳转进入页面前进行的操作，可接收to、from、next参数，此守卫钩子中还不能获取到Vue.js组件实例，但是可通过next(vm => {})获取当前组件实例。 例如： beforeRouteEnter (to, from, next) { next(vm => { // 此处的vm相当于this consol...
组件内路由守卫beforeRouteEnter和beforeRouteLeave
qiuyushuofeng的专栏
05-18 1052
从home.vue组件跳转到news.vue组件调用beforeRouteEnter,离开news.vue组件调用beforeRouteLeave <template> <ul> <li>news001 <input type="text"></li> <li>news002 <input type="text"></li> <li>news003 <inpu
解决 vue 路由报错 Cannot read property ‘beforeRouteEnter‘ of undefined
weixin_42333548的博客
03-06 4120
一、具体路由报错信息 ​ 二、为什么会出现这种情况 beforeRouterEnter是页面进入之前调用，所以取不到实例，默认调用 BeforeRouteEntry 钩子导致。 三、解决办法 方法1: 降低vue-router版本 npm i vue-router@2.4.0 将现在的版本降到2.4.0版本以下 方法2: 修改router路由引入方法 { path: ...
独享路由守卫和组件路由守卫的顺序
05-16
在 Angular 中，路由守卫有多种类型，其中包括独享路由守卫和组件路由守卫。 独享路由守卫是指应用于整个路由的守卫，可以用来检查用户是否有权限访问该路由。组件路由守卫是指应用于单个组件的守卫，可以用来检查...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值