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