vue中全局路由守卫中替代this操作(this.$store/this.$vux)


Posted in Javascript onJuly 24, 2020

全局路由守卫this.$vux.loading.hide()报错,访问不到this

解决办法

申明变量代替this

main.js文件方法

router.beforeEach((to, from, next) => {
 if(vue){
 vue.$vux.loading.hide()
 }else{

 }
 next()
})

let vue = new Vue({
 el: '#app',
 router,
 store,
 components: { App },
 template: '<App/>'
})

if判断防止第一次初始化报错

或者

let vue = new Vue({
 el: '#app',
 router,
 store,
 components: { App },
 template: '<App/>'
})
router.beforeEach((to, from, next) => {
 // if(vue){
 vue.$vux.loading.hide()
 // }else{

 // }
 next()
})

补充知识:解决导航守卫使用不了this.$store

在vue router的导航守卫如beforeEach()中是无法直接通过this.$store去操作vuex的,因为这里的this指向不一致。

解决方式是在router的index.js中引入初始化好的store

import store from '@/store'

然后在导航守卫中可直接拿到router了

/**导航守卫 */
router.beforeEach((to, form, next) => {
 console.log(store.getters)
})

以上这篇vue中全局路由守卫中替代this操作(this.$store/this.$vux)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于Jquery的跨域传输数据(JSONP)
Mar 10 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
Jul 31 Javascript
JS 实现导航栏悬停效果(续)
Sep 24 Javascript
javascript字符串循环匹配实例分析
Jul 17 Javascript
关于页面刷新vuex数据消失问题解决方案
Jul 03 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
浅谈vue引入css,less遇到的坑和解决方法
Jan 20 Javascript
深入分析element ScrollBar滚动组件源码
Jan 22 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
Apr 25 Javascript
vue计算属性无法监听到数组内部变化的解决方案
Nov 06 Javascript
vue的webcamjs集成方式
Nov 16 Javascript
Vue3 Composition API的使用简介
Mar 29 Vue.js
javascript实现支付宝滑块验证码效果
Jul 24 #Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 #Javascript
如何通过vscode运行调试javascript代码
Jul 24 #Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 #Javascript
js实现验证码功能
Jul 24 #Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
Jul 24 #Javascript
深入了解Vue.js 混入(mixins)
Jul 23 #Javascript
You might like
兼容PHP和Java的des加密解密代码分享
2014/06/26 PHP
PHP常用设计模式之委托设计模式
2016/02/13 PHP
PHP实现二维数组根据key进行排序的方法
2016/12/30 PHP
关于ExtJS4.1:快捷键支持的问题
2013/04/24 Javascript
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
javascript中undefined与null的区别
2015/08/16 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
2017/01/11 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
javascript数组的定义及操作实例
2019/11/10 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
python和pyqt实现360的CLable控件
2014/02/21 Python
Python函数中的函数(闭包)用法实例
2016/03/15 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
python实现黑客字幕雨效果
2018/06/21 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
大数据分析用java还是Python
2020/07/06 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
怎么处理XML的中文问题
2015/03/26 面试题
计算机网络专业个人的自我评价
2013/10/17 职场文书
学年自我鉴定
2014/01/16 职场文书
奶茶店创业计划书范文
2014/01/17 职场文书
学生宿舍管理制度
2014/01/30 职场文书
农村结婚典礼司仪主持词
2014/03/14 职场文书
小学生家长寄语
2014/04/02 职场文书
汉语言文学专业求职信
2014/06/19 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
2014村党支部书记党建工作汇报材料
2014/11/02 职场文书
公司介绍信范文
2015/01/31 职场文书
2015年七一建党节慰问信
2015/03/23 职场文书
高中政治教师教学反思
2016/02/23 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书