vue多页面项目使用全局Loading组件

更新日期: 2019-06-14阅读: 3.7k标签: 多页面

多页面vue应用中,在请求接口之前统一加上Loading作为未请求到数据之前的过渡展示。由于多页面未使用vuex做状态管理,只在入口统一注册了bus,所以此例子使用eventbus做事件通信。


在Loading.vue中,一个简单的公共loading组件

这个loading组件用showLoading控制展示与否。

<template>
  <div class="loading" v-show="showLoading">
    <img/>
    <p>加载中...</p>
  </div>
</template>


Loading.vue中,用bus接收全局事件,控制组件的显示隐藏

用SHOW_LOADING和HIDE_LOADING事件控制组件的显示隐藏

<script>
import { Bus, SHOW_LOADING, HIDE_LOADING } from 'utils/bus'
export default {
  name: 'loading',
  data () {
    return {
      showLoading: false
    }
  },
  created () {
    this.loadingFn()
  },
  methods: {
    loadingFn () {
      Bus.$on(SHOW_LOADING, () => {
        this.showLoading = true
      })

      Bus.$on(HIDE_LOADING, () => {
        this.showLoading = false
    }
  },
}
</script>


ajax请求中统一做处理

以ajax请求为例,可以在beforeSend和complete钩子函数中emit对应的隐藏和显示事件。

new Promise((resolve, reject) => {
    let defaultOpt = {
      url,
      type: config.method || 'POST',
      data: params || {},
      timeout: 50000,
      contentType: 'application/x-www-form-urlencoded',
      dataType: json
    }

    defaultOpt.beforeSend = (xhr, settings) => {
      if(config.setLoad){
        Bus.$emit(SHOW_LOADING)
      } else {
        Bus.$emit(HIDE_LOADING)
      }
    }

    defaultOpt.complete = () => {
      Bus.$emit(HIDE_LOADING)
    }

    $.ajax(defaultOpt)
  })


将bus注册在多页面的应用的main.js中

由于每个页面都有可能用到这个效果,这时候会在全局注册一些公共的组件,这样哪个页面需要用到,不需要重新引入,直接调用组件即可。

import Vue from 'vue'
import App from './App.vue'
import bus from 'utils/bus'
import components from 'utils/components.js'

// 注册统一的bus应用
Vue.prototype.$bus = bus
// 全局注册组件
Vue.use(components)

new Vue({
  render: h => h(App)
}).$mount('#app')


components.js里放置需要全局注册的组件

import Loading from 'components/Loading.vue'
export default (Vue) => {
  Vue.component('Loading', Loading),
  // 其他组件
}


额外需要注意的

用的时候直接引入到需要的页面即可。
但是会有一个小小的问题,假设某个页面在created里就要请求接口,这时候Bus.$emit(SHOW_LOADING) 会无法被接收到。因为这时候Loading组件还未能加载完成,Bus.$on(SHOW_LOADING)还未能注册上。所以,临时的解决方案是将请求先放在mounted钩子里。

来自:https://segmentfault.com/a/1190000019481462


链接: https://fly63.com/article/detial/3704

webpack 构建多页面应用初探

如何使用webpack构建多页面应用,这是一个我一直在想和解决的问题。网上也给出了很多的例子,很多想法。猛一看,觉得有那么点儿意思,但仔细看也就那样。使用webpack这个构建工具,可以使我们少考虑很多的问题。

构建多页面应用——静态资源的处理

图片常见的类型有jp(e)g,png,gif,包括现在普遍使用的svg以及webp。svg作为矢量图形,有一定的使用场景,而webp作为未来web开发的趋势,有一定的使用场景,比如:爱奇艺中的轮播图(carousel)中就是用webp,但其他的见到的不多。

vue.js多页面开发环境搭建

利用 vue-cli 搭建的项目大都是单页面应用项目,对于简单的项目,单页面就能满足要求。但对于有多个子项目的应用,如果创建多个单页面

vue-cli3 实现多页面应用

公司有专门的审批系统,我现在做的后台管理系统需要接入,移动端和PC端都要有一个页面来展示业务信息。后端不给开俩项目(也确实没必要),所以打算用多页面来解决,PC和移动端放到一个项目里,然后打包到各自的文件夹

Webpack5 搭建React多页面应用

react-multi-page-app 是一个基于 webpack5 搭建的 react 多页面应用。为什么搭建多页面应用:多个页面之间业务互不关联,页面之间并没有共享的数据

如何打造一个react技术栈的多页面的框架应用

现在很多脚手架基本上都是单页面入口的应用,比如create-react-app等,整个的入口就是src/index.js。即使是Next.js,可以使用next export,导出成一个个单独的 html 页面。但在编译时,依然是全量编译,作为本身是为同构直出量身定制的服务端框架

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!