vue中全局路由守衛(wèi)中替代this操作(this.$store/this.$vux)
全局路由守衛(wèi)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() })
補充知識:解決導(dǎo)航守衛(wèi)使用不了this.$store
在vue router的導(dǎo)航守衛(wèi)如beforeEach()中是無法直接通過this.$store去操作vuex的,因為這里的this指向不一致。
解決方式是在router的index.js中引入初始化好的store
import store from '@/store'
然后在導(dǎo)航守衛(wèi)中可直接拿到router了
/**導(dǎo)航守衛(wèi) */ router.beforeEach((to, form, next) => { console.log(store.getters) })
以上這篇vue中全局路由守衛(wèi)中替代this操作(this.$store/this.$vux)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于Vue新搭檔TypeScript快速入門實踐
這篇文章主要介紹了關(guān)于Vue新搭檔TypeScript快速入門實踐,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09vue-cli項目中img如何使用require動態(tài)獲取圖片
這篇文章主要介紹了vue-cli項目中img如何使用require動態(tài)獲取圖片,具有很好的參考價值,希望對大家有所幫助。2022-09-09一篇看懂vuejs的狀態(tài)管理神器 vuex狀態(tài)管理模式
一篇看懂vuejs的狀態(tài)管理神器,Vuex一個專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-04-04詳解關(guān)于表格合并span-method方法的補充(表格數(shù)據(jù)由后臺動態(tài)返回)
這篇文章主要介紹了詳解關(guān)于表格合并span-method方法的補充(表格數(shù)據(jù)由后臺動態(tài)返回) ,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-05-05Vue Element前端應(yīng)用開發(fā)之圖標的維護和使用
在Vue Element前端應(yīng)用中,圖標是必不可少點綴界面的元素,Element界面組件里面提供了很多常見的圖標,因此考慮擴展更多圖標,引入了vue-awesome組件,它利用了Font Awesome的內(nèi)置圖標,實現(xiàn)了更多圖標的整合,可以在項目中使用更多的圖標元素了2021-05-05