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 相关文章推荐
javascript入门·对象属性方法大总结
Oct 01 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
jQuery+pjax简单示例汇总
Apr 21 jQuery
基于canvas粒子系统的构建详解
Aug 31 Javascript
将Sublime Text 3 添加到右键中的简单方法
Dec 12 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 Javascript
vue设计一个倒计时秒杀的组件详解
Apr 06 Javascript
Jquery异步上传文件代码实例
Nov 13 jQuery
node.js中对Event Loop事件循环的理解与应用实例分析
Feb 14 Javascript
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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
linux php mysql数据库备份实现代码
2009/03/10 PHP
C# Assembly类访问程序集信息
2009/06/13 PHP
php模板函数 正则实现代码
2012/10/15 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
在JavaScript并非所有的一切都是对象
2013/04/11 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
详解Vue爬坑之vuex初识
2017/06/14 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
Python中字典的基础知识归纳小结
2015/08/19 Python
django之常用命令详解
2016/06/30 Python
基于python 处理中文路径的终极解决方法
2018/04/12 Python
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
Python操作Sql Server 2008数据库的方法详解
2018/05/17 Python
Python中xml和dict格式转换的示例代码
2019/11/07 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
python代码中怎么换行
2020/06/17 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
空字符串(“”)和null的区别
2012/11/13 面试题
.NET现在共支持多少种语言
2014/02/26 面试题
自动化职业生涯规划书范文
2014/01/03 职场文书
劳动工资科岗位职责范本
2014/03/02 职场文书
留学顾问岗位职责
2014/04/14 职场文书
师范生求职自荐信
2014/06/14 职场文书
公司离职证明标准范本
2014/10/05 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
用python自动生成日历
2021/04/24 Python
Python基础之元类详解
2021/04/29 Python