本组件作用在页面加载完成前进行loader提示,提升用户体验,只需要在app.vue中引用一次,整个项目中路由切换时就可以自动进行提示(vuex版);

1. 添加vuex值和方法;
import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({
state: {
isLoading: false
},
mutations: {
// 控制loading显示隐藏
updateLoadingStatus(state, payload) {
state.isLoading = payload.isLoading
}
},
getters: {},
actions: {}
})

19
19
 
1
import Vue from 'vue'
2
import Vuex from 'vuex'
3

4
Vue.use(Vuex)
5

6
export default new Vuex.Store({
7
  state: {
8
    isLoading: false
9
  },
10
  mutations: {
11
    // 控制loading显示隐藏
12
    updateLoadingStatus(state, payload) {
13
      state.isLoading = payload.isLoading
14
    }
15
  },
16
  getters: {},
17
  actions: {}
18
})
19


2. 将vuex添加到vue实例中供全局调用
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store' Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
15
15
 
1
import Vue from 'vue'
2
import App from './App'
3
import router from './router'
4
import store from './store'
5

6
Vue.config.productionTip = false
7

8
/* eslint-disable no-new */
9
new Vue({
10
  el: '#app',
11
  router,
12
  store,
13
  components: { App },
14
  template: '<App/>'
15
})

3. 修改vue-router,利用router事件钩子,操作控制loader组件的值
import Vue from 'vue'
import Router from 'vue-router'
import store from '../store/index'
import HelloWorld from '@/components/HelloWorld' Vue.use(Router) const routes = [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
] // 实例化路由
const router = new Router({
routes
}) // 路由跳转前的钩子
router.beforeEach(function (to, from, next) {
store.commit('updateLoadingStatus', {isLoading: true})
next()
}) // 路由跳转后的钩子
router.afterEach(function (to) {
store.commit('updateLoadingStatus', {isLoading: false})
}) export default router
32
32
 
1
import Vue from 'vue'
2
import Router from 'vue-router'
3
import store from '../store/index'
4
import HelloWorld from '@/components/HelloWorld'
5

6
Vue.use(Router)
7

8
const routes = [
9
  {
10
    path: '/',
11
    name: 'HelloWorld',
12
    component: HelloWorld
13
  }
14
]
15

16
// 实例化路由
17
const router = new Router({
18
  routes
19
})
20

21
// 路由跳转前的钩子
22
router.beforeEach(function (to, from, next) {
23
  store.commit('updateLoadingStatus', {isLoading: true})
24
  next()
25
})
26

27
// 路由跳转后的钩子
28
router.afterEach(function (to) {
29
  store.commit('updateLoadingStatus', {isLoading: false})
30
})
31

32
export default router

4. 在app.js中使用loader组件,最需要注意的一点,控制组件显示的变量,需要通过v-model来与组件绑定(如下第六行)
<template>
<div id="app">
{{isLoading}}
<img src="./assets/logo.png">
<router-view/>
<loading v-model="isLoading"></loading>
</div>
</template> <script>
import {mapState} from 'vuex'
import loading from './components/loading/loading.vue' export default {
name: 'App',
components: {
loading
},
computed: {
...mapState({
isLoading: state => state.isLoading
})
}
}
</script>
25
 
1
<template>
2
  <div id="app">
3
    {{isLoading}}
4
    <img src="./assets/logo.png">
5
    <router-view/>
6
    <loading v-model="isLoading"></loading>
7
  </div>
8
</template>
9

10
<script>
11
  import {mapState} from 'vuex'
12
  import loading from './components/loading/loading.vue'
13

14
  export default {
15
    name: 'App',
16
    components: {
17
      loading
18
    },
19
    computed: {
20
      ...mapState({
21
        isLoading: state => state.isLoading
22
      })
23
    }
24
  }
25
</script>




















vue全局loading组件的更多相关文章

  1. [vue开发记录]全局loading组件

    上图不上种,菊花万人捅: loading.js: import './loading.css' let Loading = {} // 避免重复install,设立flag Loading.insta ...

  2. vue 全局自定义组件

    1.vue文件 <template> <div style="position: absolute;bottom: 10px;text-align: center;widt ...

  3. Vue全局添加组件或者模块

    import Api from './api.js' export default { install (Vue) { Vue.prototype.$Api = Api } } 这种格式就可以在mai ...

  4. vue 全局挂载组件

    <!-- plugin.js --> import someComponent from './components/someComponent' export default { ins ...

  5. 自定义vue全局组件use使用

    自定义一个全局Loading组件,并使用:总结目录:|-components |-loading |-index.js 导出组件,并且install |-loading.vue 定义Loading组件 ...

  6. 自定义vue全局组件use使用(解释vue.use()的原理)

    我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等.其实使用的这些都是全剧组件,这里我们就来讲解一下怎么样定义一个全局组件,并解释vue.use()的 ...

  7. 自定义vue全局组件use使用、vuex的使用

    自定义vue全局组件use使用(解释vue.use()的原理)我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等.其实使用的这些都是全剧组件,这里我们 ...

  8. vue插件 使用use注册Vue全局组件和全局指令

    插件一般会注册到全局使用 官方编辑插件介绍:https://vuefe.cn/v2/guide/plugins.html 全局组件: .首先建一个自定义组件的文件夹,比如叫loading,里面有一个i ...

  9. vue 全局组件【原】

    1.目录 2.内容 -Loading.vue <template> <div class="loading"> loading... </div> ...

随机推荐

  1. Spring中注解

    @Autowired :spring注解 @Resource :J2EE注解 @Transactional(rollbackFor=Exception.class):指定回滚 @RequestMapp ...

  2. 5 微信票据 access_token--开发微信的第二道坎儿

    一 access_token基本概念 定义:access_token是公众号的全局唯一接口调用凭据,公众号调用各接口时都需使用access_token.开发者需要进行妥善保存. 时效性:access_ ...

  3. Android修改签名

    #!/bin/shtmp=~/temp.apkcp "$1" "$tmp"zip -d "$tmp" META-INF/\*jarsigne ...

  4. Java 负载均衡

    什么是负载均衡 负载均衡,英文 名称为Load Balance,指由多台服务器以对称的方式组成一个服务器集合,每台服务器都具有等价的地位,都可以单独对外提供服务而无须其他服务器的辅助.通过某种 负载分 ...

  5. Qt 学习之路 2(19):事件的接受与忽略(当重写事件回调函数时,时刻注意是否需要通过调用父类的同名函数来确保原有实现仍能进行!有好几个例子。为什么要这么做?而不是自己去手动调用这两个函数呢?因为我们无法确认父类中的这个处理函数有没有额外的操作)

    版本: 2012-09-29 2013-04-23 更新有关accept()和ignore()函数的相关内容. 2013-12-02 增加有关accept()和ignore()函数的示例. 上一章我们 ...

  6. javaScript查找HTML元素

    1.通过id查找 例:查找id="intro"元素 var x=document.getElementById("intro"); 2.通过标签名查找 例:查找 ...

  7. YTU 2596: 编程题B-日期格式

    2596: 编程题B-日期格式 时间限制: 1 Sec  内存限制: 128 MB 提交: 981  解决: 74 题目描述 注:本题只需要提交编写的函数部分的代码即可. 将输入的日期格式 月/日/年 ...

  8. APP界面常用的五种颜色搭配

    众所周知,每一种颜色带给用户的视觉感受也是不同的.现在人们对手机的依赖程度,就能看到手机中APP的发展前景,那今天就跟大家聊聊如何通过颜色搭配的不同来进行移动端APP界面的布局和排版设计.移动端UI界 ...

  9. jquery cloudzoom 3.0,magiczoom 放大镜插件 破解 移除版权信息

    jquery Cloud Zoom一款放大镜插件.但是无奈 官方下载的始终有版权信息,因此想到如下方法去掉版权信息,测试可行! 官方网址:http://www.starplugins.com/clou ...

  10. Eclipse打开Android项目报Parsing Data for android-21 failed错误的解决办法(转载)

    转载:http://segmentfault.com/blog/hongliang/1190000000739285 今天手贱,用android命令打开SDK Manager下载了最新的Android ...