获取detail

.nuxt/App.js

@@ -78,6 +78,8 @@ export default {
     },
 
     setLayout(layout) {
+      if(layout && typeof layout !== 'string') throw new Error('[nuxt] Avoid using non-string value as layout property.')
+
       if (!layout || !layouts['_' + layout]) {
         layout = 'default'
       }

.nuxt/client.js

@@ -29,7 +29,45 @@ let store
 // Try to rehydrate SSR data from window
 const NUXT = window.__NUXT__ || {}
 
-Object.assign(Vue.config, {"silent":true,"performance":false})
+Object.assign(Vue.config, {"silent":false,"performance":true})
+
+// Setup global Vue error handler
+if (!Vue.config.$nuxt) {
+  const defaultErrorHandler = Vue.config.errorHandler
+  Vue.config.errorHandler = (err, vm, info, ...rest) => {
+    // Call other handler if exist
+    let handled = null
+    if (typeof defaultErrorHandler === 'function') {
+      handled = defaultErrorHandler(err, vm, info, ...rest)
+    }
+    if (handled === true) {
+      return handled
+    }
+
+    if (vm && vm.$root) {
+      const nuxtApp = Object.keys(Vue.config.$nuxt)
+        .find(nuxtInstance => vm.$root[nuxtInstance])
+
+      // Show Nuxt Error Page
+      if (nuxtApp && vm.$root[nuxtApp].error && info !== 'render function') {
+        vm.$root[nuxtApp].error(err)
+      }
+    }
+
+    if (typeof defaultErrorHandler === 'function') {
+      return handled
+    }
+
+    // Log to console
+    if (process.env.NODE_ENV !== 'production') {
+      console.error(err)
+    } else {
+      console.error(err.message || err)
+    }
+  }
+  Vue.config.$nuxt = {}
+}
+Vue.config.$nuxt.$nuxt = true
 
 // Create and mount App
 createApp()
@@ -431,6 +469,9 @@ function fixPrepatch(to, ___) {
       }
     })
     showNextPage.call(this, to)
+
+    // Hot reloading
+    setTimeout(() => hotReloadAPI(this), 100)
   })
 }
 
@@ -451,6 +492,101 @@ function nuxtReady(_app) {
   })
 }
 
+// Special hot reload with asyncData(context)
+function getNuxtChildComponents($parent, $components = []) {
+  $parent.$children.forEach(($child) => {
+    if ($child.$vnode.data.nuxtChild && !$components.find(c =>(c.$options.__file === $child.$options.__file))) {
+      $components.push($child)
+    }
+    if ($child.$children && $child.$children.length) {
+      getNuxtChildComponents($child, $components)
+    }
+  })
+
+  return $components
+}
+
+function hotReloadAPI(_app) {
+  if (!module.hot) return
+
+  let $components = getNuxtChildComponents(_app.$nuxt, [])
+
+  $components.forEach(addHotReload.bind(_app))
+}
+
+function addHotReload($component, depth) {
+  if ($component.$vnode.data._hasHotReload) return
+  $component.$vnode.data._hasHotReload = true
+
+  var _forceUpdate = $component.$forceUpdate.bind($component.$parent)
+
+  $component.$vnode.context.$forceUpdate = async () => {
+    let Components = getMatchedComponents(router.currentRoute)
+    let Component = Components[depth]
+    if (!Component) return _forceUpdate()
+    if (typeof Component === 'object' && !Component.options) {
+      // Updated via vue-router resolveAsyncComponents()
+      Component = Vue.extend(Component)
+      Component._Ctor = Component
+    }
+    this.error()
+    let promises = []
+    const next = function (path) {
+      this.$loading.finish && this.$loading.finish()
+      router.push(path)
+    }
+    await setContext(app, {
+      route: router.currentRoute,
+      isHMR: true,
+      next: next.bind(this)
+    })
+    const context = app.context
+
+    if (this.$loading.start && !this.$loading.manual) this.$loading.start()
+
+    callMiddleware.call(this, Components, context)
+    .then(() => {
+      // If layout changed
+      if (depth !== 0) return Promise.resolve()
+      let layout = Component.options.layout || 'default'
+      if (typeof layout === 'function') {
+        layout = layout(context)
+      }
+      if (this.layoutName === layout) return Promise.resolve()
+      let promise = this.loadLayout(layout)
+      promise.then(() => {
+        this.setLayout(layout)
+        Vue.nextTick(() => hotReloadAPI(this))
+      })
+      return promise
+    })
+    .then(() => {
+      return callMiddleware.call(this, Components, context, this.layout)
+    })
+    .then(() => {
+      // Call asyncData(context)
+      let pAsyncData = promisify(Component.options.asyncData || noopData, context)
+      pAsyncData.then((asyncDataResult) => {
+        applyAsyncData(Component, asyncDataResult)
+        this.$loading.increase && this.$loading.increase(30)
+      })
+      promises.push(pAsyncData)
+      // Call fetch()
+      Component.options.fetch = Component.options.fetch || noopFetch
+      let pFetch = Component.options.fetch(context)
+      if (!pFetch || (!(pFetch instanceof Promise) && (typeof pFetch.then !== 'function'))) { pFetch = Promise.resolve(pFetch) }
+      pFetch.then(() => this.$loading.increase && this.$loading.increase(30))
+      promises.push(pFetch)
+      return Promise.all(promises)
+    })
+    .then(() => {
+      this.$loading.finish && this.$loading.finish()
+      _forceUpdate()
+      setTimeout(() => hotReloadAPI(this), 100)
+    })
+  }
+}
+
 async function mountApp(__app) {
   // Set global variables
   app = __app.app
@@ -476,6 +612,9 @@ async function mountApp(__app) {
     Vue.nextTick(() => {
       // Call window.{{globals.readyCallback}} callbacks
       nuxtReady(_app)
+
+      // Enable hot reloading
+      hotReloadAPI(_app)
     })
   }
 

.nuxt/components/nuxt-error.vue

@@ -8,6 +8,8 @@
         <nuxt-link class="error-link" to="/">Back to the home page</nuxt-link>
       </p>
 
+      <p class="description" v-else>An error occurred while rendering the page. Check developer tools console for details.</p>
+
       <div class="logo">
         <a href="https://nuxtjs.org" target="_blank" rel="noopener">Nuxt.js</a>
       </div>

.nuxt/loading.html

@@ -103,3 +103,5 @@ window.addEventListener('error', function () {
 </script>
 
 <div id="nuxt-loading" aria-live="polite" role="status"><div>Loading...</div></div>
+
+<!-- https://projects.lukehaas.me/css-loaders -->

.nuxt/router.js

@@ -7,6 +7,7 @@ const _3599ba51 = () => interopDefault(import('../pages/index/index.vue' /* webp
 const _dfb55690 = () => interopDefault(import('../pages/index/cert/index.vue' /* webpackChunkName: "pages/index/cert/index" */))
 const _6952764e = () => interopDefault(import('../pages/index/type/index.vue' /* webpackChunkName: "pages/index/type/index" */))
 const _dcf8ade6 = () => interopDefault(import('../pages/index/cert/freelancer.vue' /* webpackChunkName: "pages/index/cert/freelancer" */))
+const _bc074ab6 = () => interopDefault(import('../pages/index/cert/id.vue' /* webpackChunkName: "pages/index/cert/id" */))
 const _ca5e67b8 = () => interopDefault(import('../pages/index/type/pay.vue' /* webpackChunkName: "pages/index/type/pay" */))
 const _3543bdce = () => interopDefault(import('../pages/index/type/vip.vue' /* webpackChunkName: "pages/index/type/vip" */))
 const _8c50bd16 = () => interopDefault(import('../pages/index/vip/pay.vue' /* webpackChunkName: "pages/index/vip/pay" */))
@@ -88,6 +89,10 @@ export function createRouter() {
         component: _dcf8ade6,
         name: "index-cert-freelancer"
       }, {
+        path: "cert/id",
+        component: _bc074ab6,
+        name: "index-cert-id"
+      }, {
         path: "type/pay",
         component: _ca5e67b8,
         name: "index-type-pay"

.nuxt/server.js

@@ -8,7 +8,7 @@ import { createApp, NuxtError } from './index'
 const debug = require('debug')('nuxt:render')
 debug.color = 4 // force blue color
 
-const isDev = false
+const isDev = true
 
 const noopApp = () => new Vue({ render: h => h('div') })
 
@@ -79,6 +79,8 @@ export default async (ssrContext) => {
     return renderErrorPage()
   }
 
+  const s = isDev && Date.now()
+
   // Components are already resolved by setContext -> getRouteData (app/utils.js)
   const Components = getMatchedComponents(router.match(ssrContext.url))
 
@@ -208,6 +210,8 @@ export default async (ssrContext) => {
     return Promise.all(promises)
   }))
 
+  if (asyncDatas.length) debug('Data fetching ' + ssrContext.url + ': ' + (Date.now() - s) + 'ms')
+
   // datas are the first row of each
   ssrContext.nuxt.data = asyncDatas.map(r => r[0] || {})
 

.nuxt/utils.js

@@ -122,7 +122,7 @@ export async function setContext(app, context) {
   if (!app.context) {
     app.context = {
       isStatic: process.static,
-      isDev: false,
+      isDev: true,
       isHMR: false,
       app,
       store: app.store,
@@ -209,6 +209,9 @@ export function middlewareSeries(promises, appContext) {
 export function promisify(fn, context) {
   let promise
   if (fn.length === 2) {
+      console.warn('Callback-based asyncData, fetch or middleware calls are deprecated. ' +
+        'Please switch to promises or async/await syntax')
+
     // fn(context, callback)
     promise = new Promise((resolve) => {
       fn(context, function (err, data) {

.nuxt/views/error.html

@@ -13,7 +13,7 @@
     <div class="error">
         <svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" fill="#DBE1EC" viewBox="0 0 48 48"><path d="M22 30h4v4h-4zm0-16h4v12h-4zm1.99-10C12.94 4 4 12.95 4 24s8.94 20 19.99 20S44 35.05 44 24 35.04 4 23.99 4zM24 40c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z"/></svg>
         <div class="title">Server error</div>
-        <div class="description">An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details.</div>
+        <div class="description">{{ message }}</div>
     </div>
     <div class="logo">
       <a href="https://nuxtjs.org" target="_blank" rel="noopener">Nuxt.js</a>

components/header.vue

@@ -152,7 +152,6 @@ export default {
     },
     async getMessageCount() {
       let res = await this.$get('/api/message/getUnreadCount')
-      console.log(res)
       this.messageCount = res.data
     }
   }

pages/index/cert/id.vue

@@ -0,0 +1,25 @@
+<template>
+  <section class="cert-id">{{detail}}</section>
+</template>
+
+<script>
+import http from '@/plugins/http'
+
+export default {
+  async asyncData(ctx) {
+    let res = await http.post(`${http.host.dev}/api/cert/getCertDetail`, { cert_no: ctx.query.no })
+    return {
+      detail: res.data
+    }
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+
+  }
+}
+</script>
+
+<style scoped>
+</style>