本组件作用在页面加载完成前进行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. PHP 画图——使用jpgraph画图

     1.要支持中文须要用到simhei.ttf和simsun.ttc这两个字体,在使用中文的时候须要使用SetFont(FF_SIMSUN,FS_BOLD)设置字体. 将须要的字体放入到项目文件夹下 ...

  2. base64和图片互转

    pom.xml添加 <!-- https://mvnrepository.com/artifact/commons-codec/commons-codec --> <dependen ...

  3. Java 解析excel2003和2007区别和兼容性问题(POI操作)

    最近在使用POI对excel操作中发现一些问题,2003和2007的区别还是蛮大的: 2007相关的包: poi-3.9.jar poi-examples-3.8.jar poi-excelant-3 ...

  4. Deep Learning 30: 卷积理解

    一.深度卷积神经网络学习笔记(一): 1. 这篇文章以贾清扬的ppt说明了卷积的实质,更说明了卷积输出图像大小应该为: 假设输入图像尺寸为W,卷积核尺寸为F,步幅(stride)为S(卷积核移动的步幅 ...

  5. hexSHA1散列加密解密(不可逆)

    1.maven引入codec和commons依赖: <dependency> <groupId>commons-codec</groupId> <artifa ...

  6. Android vector Path Data画图详解

    SVG是一种矢量图格式,是Scalable Vector Graphics三个单词的首字母缩写.在xml文件中的标签是,画出的图形可以像一般的图片资源使用,例子如下: <vector xmlns ...

  7. 【FFT初识】

      FFT在用于解决多项式乘法A*B(A和B为多项式,形如a0+a1*x^1+a2*x^2....)的时候,通俗地解释就是: 原理:先根据各自的系数各自转化为对应的向量(O(nlogn)),然后向量相 ...

  8. AutoIT: 开发界面结合GUI automation和Watir Automation

    可以应用AutoIT开发出界面,从而把AutoIT对GUI的自动化测试与Watir对web的自动化测结合在一起.以下代码是我学习GUI界面开发的实例代码.1. 当点击Watir_Test_Button ...

  9. 【196】Dell 移动工作站系统安装方法

    会出现找不到硬盘的情况,解决方法:安装系统的时候需要加载阵列卡驱动 下载阵列卡驱动,以 Dell T7610 为例根据安装系统进行选择,地址:http://zh.community.dell.com/ ...

  10. SAS基础 -- 逻辑库不存在问题解决

    SAS安装 -- 逻辑库不存在问题解决 1.SAS打不开,将系统时间改为系统提示错误的时间: 2.请在以下两个路径下,新建SASCFG文件夹(注意红色部分为你电脑SAS的安装路径)   D:\Prog ...