vue中全局路由守衛(wèi)中替代this操作(this.$store/this.$vux)
更新時(shí)間：2020年07月24日 09:24:29 作者：Geek碼農(nóng)
這篇文章主要介紹了vue中全局路由守衛(wèi)中替代this操作(this.$store/this.$vux)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
全局路由守衛(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)文章
教你用Vue基礎(chǔ)語(yǔ)法來(lái)寫(xiě)一個(gè)五子棋小游戲
在布局上,五子棋相比那些目標(biāo)是隨機(jī)運(yùn)動(dòng)的游戲,實(shí)現(xiàn)起來(lái)相對(duì)簡(jiǎn)單許多,思路也很清晰,下面這篇文章主要給大家介紹了關(guān)于用Vue基礎(chǔ)語(yǔ)法來(lái)寫(xiě)一個(gè)五子棋小游戲的相關(guān)資料,需要的朋友可以參考下2022-06-06
Vue web前端三大主流框架之一,是一套用于構(gòu)建用戶界面的漸進(jìn)式框架,下面這篇文章主要給大家介紹了關(guān)于Vue安裝與配置教程的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
vue修改數(shù)據(jù)的時(shí)候,表單值回顯不正確問(wèn)題及解決
這篇文章主要介紹了vue修改數(shù)據(jù)的時(shí)候，表單值回顯不正確的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-11-11
這篇文章主要介紹了vue3中的組件間的傳值(props)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
本篇文章通過(guò)實(shí)例給大家分享了vue自動(dòng)化表單的操作方法以及相關(guān)的代碼做了描述，有興趣的朋友可以跟著學(xué)習(xí)下。2018-05-05
詳解 vue better-scroll滾動(dòng)插件排坑
本篇文章主要介紹了詳解 vue better-scroll滾動(dòng)插件排坑，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
本篇文章主要介紹了Vue 獲取數(shù)組鍵名的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
vue實(shí)現(xiàn)滾動(dòng)鼠標(biāo)滾輪切換頁(yè)面
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)滾動(dòng)鼠標(biāo)滾輪切換頁(yè)面，類似于縱向走馬燈，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
詳解vue-cli + webpack 多頁(yè)面實(shí)例配置優(yōu)化方法
本篇文章主要介紹了詳解vue-cli + webpack 多頁(yè)面實(shí)例配置優(yōu)化方法，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07
Vue+Axios實(shí)現(xiàn)文件上傳自定義進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了Vue+Axios實(shí)現(xiàn)文件上傳自定義進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08