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