App.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. import Vue from 'vue'
  2. import { getMatchedComponentsInstances, getChildrenComponentInstancesUsingFetch, promisify, globalHandleError, urlJoin, sanitizeComponent } from './utils'
  3. import NuxtError from '..\\layouts\\error.vue'
  4. import NuxtLoading from './components/nuxt-loading.vue'
  5. import '..\\assets\\css\\common.css'
  6. import '..\\assets\\css\\special.css'
  7. import '..\\node_modules\\swiper\\dist\\css\\swiper.css'
  8. import _9ed87c7a from '..\\layouts\\default_mobile_header_no_jump.vue'
  9. import _6f6c098b from '..\\layouts\\default.vue'
  10. import _ca75356a from '..\\layouts\\header-fix.vue'
  11. import _bd0fdcf8 from '..\\layouts\\noheader.vue'
  12. import _42906ebb from '..\\layouts\\opacity_header_kf_tmp.vue'
  13. import _77223ab7 from '..\\layouts\\opacity_header.vue'
  14. import _eca48542 from '..\\layouts\\w-1440-default.vue'
  15. const layouts = { "_default_mobile_header_no_jump": sanitizeComponent(_9ed87c7a),"_default": sanitizeComponent(_6f6c098b),"_header-fix": sanitizeComponent(_ca75356a),"_noheader": sanitizeComponent(_bd0fdcf8),"_opacity_header_kf_tmp": sanitizeComponent(_42906ebb),"_opacity_header": sanitizeComponent(_77223ab7),"_w-1440-default": sanitizeComponent(_eca48542) }
  16. export default {
  17. render (h, props) {
  18. const loadingEl = h('NuxtLoading', { ref: 'loading' })
  19. const layoutEl = h(this.layout || 'nuxt')
  20. const templateEl = h('div', {
  21. domProps: {
  22. id: '__layout'
  23. },
  24. key: this.layoutName
  25. }, [layoutEl])
  26. const transitionEl = h('transition', {
  27. props: {
  28. name: 'layout',
  29. mode: 'out-in'
  30. },
  31. on: {
  32. beforeEnter (el) {
  33. // Ensure to trigger scroll event after calling scrollBehavior
  34. window.$nuxt.$nextTick(() => {
  35. window.$nuxt.$emit('triggerScroll')
  36. })
  37. }
  38. }
  39. }, [templateEl])
  40. return h('div', {
  41. domProps: {
  42. id: '__nuxt'
  43. }
  44. }, [
  45. loadingEl,
  46. transitionEl
  47. ])
  48. },
  49. data: () => ({
  50. isOnline: true,
  51. layout: null,
  52. layoutName: '',
  53. nbFetching: 0
  54. }),
  55. beforeCreate () {
  56. Vue.util.defineReactive(this, 'nuxt', this.$options.nuxt)
  57. },
  58. created () {
  59. // Add this.$nuxt in child instances
  60. Vue.prototype.$nuxt = this
  61. if (process.client) {
  62. // add to window so we can listen when ready
  63. window.$nuxt = this
  64. this.refreshOnlineStatus()
  65. // Setup the listeners
  66. window.addEventListener('online', this.refreshOnlineStatus)
  67. window.addEventListener('offline', this.refreshOnlineStatus)
  68. }
  69. // Add $nuxt.error()
  70. this.error = this.nuxt.error
  71. // Add $nuxt.context
  72. this.context = this.$options.context
  73. },
  74. async mounted () {
  75. this.$loading = this.$refs.loading
  76. },
  77. watch: {
  78. 'nuxt.err': 'errorChanged'
  79. },
  80. computed: {
  81. isOffline () {
  82. return !this.isOnline
  83. },
  84. isFetching () {
  85. return this.nbFetching > 0
  86. },
  87. },
  88. methods: {
  89. refreshOnlineStatus () {
  90. if (process.client) {
  91. if (typeof window.navigator.onLine === 'undefined') {
  92. // If the browser doesn't support connection status reports
  93. // assume that we are online because most apps' only react
  94. // when they now that the connection has been interrupted
  95. this.isOnline = true
  96. } else {
  97. this.isOnline = window.navigator.onLine
  98. }
  99. }
  100. },
  101. async refresh () {
  102. const pages = getMatchedComponentsInstances(this.$route)
  103. if (!pages.length) {
  104. return
  105. }
  106. this.$loading.start()
  107. const promises = pages.map((page) => {
  108. const p = []
  109. // Old fetch
  110. if (page.$options.fetch && page.$options.fetch.length) {
  111. p.push(promisify(page.$options.fetch, this.context))
  112. }
  113. if (page.$fetch) {
  114. p.push(page.$fetch())
  115. } else {
  116. // Get all component instance to call $fetch
  117. for (const component of getChildrenComponentInstancesUsingFetch(page.$vnode.componentInstance)) {
  118. p.push(component.$fetch())
  119. }
  120. }
  121. if (page.$options.asyncData) {
  122. p.push(
  123. promisify(page.$options.asyncData, this.context)
  124. .then((newData) => {
  125. for (const key in newData) {
  126. Vue.set(page.$data, key, newData[key])
  127. }
  128. })
  129. )
  130. }
  131. return Promise.all(p)
  132. })
  133. try {
  134. await Promise.all(promises)
  135. } catch (error) {
  136. this.$loading.fail(error)
  137. globalHandleError(error)
  138. this.error(error)
  139. }
  140. this.$loading.finish()
  141. },
  142. errorChanged () {
  143. if (this.nuxt.err && this.$loading) {
  144. if (this.$loading.fail) {
  145. this.$loading.fail(this.nuxt.err)
  146. }
  147. if (this.$loading.finish) {
  148. this.$loading.finish()
  149. }
  150. }
  151. },
  152. setLayout (layout) {
  153. if (!layout || !layouts['_' + layout]) {
  154. layout = 'default'
  155. }
  156. this.layoutName = layout
  157. this.layout = layouts['_' + layout]
  158. return this.layout
  159. },
  160. loadLayout (layout) {
  161. if (!layout || !layouts['_' + layout]) {
  162. layout = 'default'
  163. }
  164. return Promise.resolve(layouts['_' + layout])
  165. },
  166. },
  167. components: {
  168. NuxtLoading
  169. }
  170. }