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

全局路由守卫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)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue路由守卫及路由守卫无限循环问题详析

    先贴一波官方文档的内容 const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... }) 当一个导航触发时,全局前置守卫按照创建顺序调用.守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中. 每个守卫方法接收三个参数: to: Route: 即将要进入的目标 路由对象 from: Route: 当前导航正要离开的路由 next: Function: 一定要调用

  • 在Vue中使用this.$store或者是$route一直报错的解决

    今天在引入路由参数和状态组件的时候发现一直报空找不到,但是我在控制台查看还能找得到 一直超费解,直到我在其他组件单独测试的时候又可以了 这是测试正常的 test1s : function(){ debugger var test1=this.$route.params.num; console.log(test1); return test1; } getRequest: (val)=> {//改变海黄学堂状态 debugger let thisRoute=this.$store.state.s

  • 在vue中利用全局路由钩子给url统一添加公共参数的例子

    有的时候我们可能有这样的需求,比如现在url为m.taoyuewenhua.com/#/ 我们需要在用户每次跳转路由的时候监控有没有abc这个参数. 如果有,后端要求我们在以后跳转任何url的时候,都要在url携带上这个参数.就变成m.taoyuewenhua.com/#/&abc=xxx; 这个参数称为"公共参数"; 那么,我们该如何做呢?因为vue中有很多组件.在每个组件都写的话,太麻烦.所以这个时候,全局路由钩子登场了.分别是 router.beforeEach 全局导航

  • 在 Vue.js中优雅地使用全局事件的方法

    Vue 2.0 版本中取消了 v1 中的 $broadcast 方法,因此要使用全局事件时,不可避免地会使用到 event-bus 之类的方法,本文旨在提出一种不需要用到 event-bus 的全局事件使用方法. 主要思路是将事件全部绑定在 $root 上,并为所有全局事件添加一个前缀防止冲突,再通过向 $options 上注入新的 key 来简化使用方式. 以下为 mixin 文件代码 // event-mixin.js export default { created() { if (thi

  • 详解vuex数据传输的两种方式及this.$store undefined的解决办法

    这个问题很乌龙,但也很值得记录一下, 原因是main.js中import store时将store的首字母写成了大写. 问题版本的如下所示: import Store from './store' 我大概看了一下, vue似乎不支持在import部分包含带首字母大写的变量,所有import进来的对象必须要小写,我试过把router改成Router, 发现路由部分也会受影响. 这种方式是典型的将vuex值及其中的方法暴露给所有的组件使用, 即将vuex视作一个"全局变量", 但vuex也

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

    全局路由守卫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/>

  • 关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法

    #在切换路由时,组件会被复用,不过,这也意味着组件的生命周期钩子不会再被调用. 解决办法有两种,1简单地 watch (监测变化) $route 对象: const User = { template: '...', watch: { '$route' (to, from) { // 对路由变化作出响应... } } } 2.使用 2.2 中引入的 beforeRouteUpdate 导航守卫: const User = { template: '...', beforeRouteUpdate

  • vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码

    有这样一个场景:如果你在登录之前输入了http://localhost:8080/oauth2-mgm-app/#/userManage,想进入userManage页面,但是由于没有登录,系统是不会让你进入这个页面,之后会被定向到login页面.但是在登录之后,认为你有这个权限了,就需要重新定向到userManage页面.大致流程图如图1所示: 图1 登录后跳转到未登录前指定页面流程图 在vue-route的官方文档里其实有给到过这个demo,官方文档链接在此:https://router.vu

  • vue+axios全局添加请求头和参数操作

    走登录的接口都会返回一个token值,然后存起来方便之后调接口的时候给后台传过去,传给后台的方式有两种:(具体使用哪种需要和后台商量) 1.放在请求头中 2.放在接口的参数中 1.放在请求头中 下面代码是从本地cookie中拿token VueCookie:一个用于处理浏览器cookies的简单Vue.js插件. // 在封装axios的文件中添加拦截器 // 添加请求拦截器,在请求头中加token service.interceptors.request.use( config => { //

  • nuxt中使用路由守卫的方法步骤

    1.在plugins文件下创建一个route.js import { getCookie, setCookie } from '@/pages/logreg/api/cookie' import axios from 'axios' export default ({ app, store }) => { app.router.beforeEach((to, from, next) => { let isClient = process.client if (isClient) { let c

  • vue动态添加路由addRoutes之不能将动态路由存入缓存的解决

    在我不知道vue的路由还可以通过addRoutes动态添加时,我只知道vue的路由都是写死在路由表中的,每当跳转时再去加载相应的路由.直到在一个新公司接到需要根据用户的权限显示不同的菜单的需求时才知道了原来vue-router还有一个addRoutes的API,立马研究了一下. router.addRoutes: 函数签名: router.addRoutes(routes: Array<RouteConfig>) 动态添加更多的路由规则.参数必须是一个符合routes选项要求的数组. 点这里去

  • vue 路由守卫(导航守卫)及其具体使用

    最近在学习vue,感觉路由守卫这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记 官方文档 导航守卫其实也是路由守卫,也可以是路由拦截,我们可以通过路由拦截,来判断用户是否登录,该页面用户是否有权限浏览,需要结合meta来实现 vue中路由守卫一共有三种,一个全局路由守卫,一个是组件内路由守卫,一个是router独享守卫 所谓的路由守卫可以简单的理解为一座房子的门口的保安,想要进入这个房子就必须通过保安的检查,要告诉路由守卫你从哪里来?总不能随便陌生人就给放进去?要到哪里去?然后保安再告

  • Vue路由守卫案例代码

    目录 Vue路由守卫 全局路由守卫 全局前置守卫 全局后置守卫 实例代码: 独享守卫 组件内守卫 总结 Vue路由守卫 路由守卫,简单理解来说就是,当用户要进行一些操作时,我需要用户的一些信息或数据或行为,我判断过后,才会同意用户进行操作,说到这里,我想大家心里都或多或少有点理解了吧,官方一点的解释就是进行操作的鉴权,当操作与之条件匹配时,操作成功,当操作与之不匹配时,操作终止,作用就是是对路由进行权限控制. 在Vue中,路由守卫分为三种:全局路由守卫.独享路由守卫以及组件内路由守卫 全局路由守

  • Vue Router路由守卫超详细介绍

    目录 全局前置&后置路由守卫 独享路由守卫 组件内路由守卫 全局前置&后置路由守卫 router/index.js import Vue from 'vue'; import VueRouter from 'vue-router'; import List from '@/pages/List' Vue.use(VueRouter); const router = new VueRouter({ routes: [{ path: '/list', component: List, meta

随机推荐