Fix middleware on client-side

examples/middleware/middleware/visits.js

@@ -1,4 +1,3 @@
 export default function ({ store, route, redirect }) {
   store.commit('ADD_VISIT', route.path)
-  if (route.fullPath === '/') return redirect('/foo')
 }

examples/middleware/pages/_slug.vue

@@ -12,7 +12,6 @@
 <script>
 export default {
   asyncData ({ store, route, userAgent }) {
-    console.log('Call async data', route.fullPath)
     return {
       userAgent,
       slugs: [

lib/app/client.js

@@ -82,10 +82,13 @@ function callMiddleware (Components, context, layout) {
   return middlewareSeries(midd, context)
 }
 
-function render (to, from, next) {
+async function render (to, from, next) {
   if (this._hashChanged) return next()
+  let layout
+  let nextCalled = false
   const _next = function (path) {
     <%= (loading ? 'this.$loading.finish && this.$loading.finish()' : '') %>
+    if (nextCalled) return
     nextCalled = true
     next(path)
   }
@@ -96,14 +99,13 @@ function render (to, from, next) {
   this._hadError = !!this.$options._nuxt.err
   if (!Components.length) {
     // Default layout
-    callMiddleware.call(this, Components, context)
-    .then(() => this.loadLayout(typeof NuxtError.layout === 'function' ? NuxtError.layout(context) : NuxtError.layout))
-    .then(callMiddleware.bind(this, Components, context))
-    .then(() => {
+    await callMiddleware.call(this, Components, context)
+    if (context._redirected) return
+    layout = await this.loadLayout(typeof NuxtError.layout === 'function' ? NuxtError.layout(context) : NuxtError.layout)
+    await callMiddleware.call(this, Components, context, layout)
+    if (context._redirected) return
     this.error({ statusCode: 404, message: 'This page could not be found.' })
     return next()
-    })
-    return
   }
   // Update ._data and other properties if hot reloaded
   Components.forEach(function (Component) {
@@ -113,18 +115,17 @@ function render (to, from, next) {
     }
   })
   this.setTransitions(mapTransitions(Components, to, from))
-  let nextCalled = false
+  try {
     // Set layout
-  callMiddleware.call(this, Components, context)
-  .then(() => {
-    let layout = Components[0].options.layout
+    await callMiddleware.call(this, Components, context)
+    if (context._redirected) return
+    layout = Components[0].options.layout
     if (typeof layout === 'function') {
       layout = layout(context)
     }
-    return this.loadLayout(layout)
-  })
-  .then(callMiddleware.bind(this, Components, context))
-  .then(() => {
+    layout = await this.loadLayout(layout)
+    await callMiddleware.call(this, Components, context, layout)
+    if (context._redirected) return
     // Pass validation?
     let isValid = true
     Components.forEach((Component) => {
@@ -139,7 +140,7 @@ function render (to, from, next) {
       this.error({ statusCode: 404, message: 'This page could not be found.' })
       return next()
     }
-    return Promise.all(Components.map((Component, i) => {
+    await Promise.all(Components.map((Component, i) => {
       // Check if only children route changed
       Component._path = compile(to.matched[i].path)(to.params)
       if (!this._hadError && Component._path === _lastPaths[i] && (i + 1) !== Components.length) {
@@ -163,16 +164,13 @@ function render (to, from, next) {
       }
       return Promise.all(promises)
     }))
-  })
-  .then(() => {
     _lastPaths = Components.map((Component, i) => compile(to.matched[i].path)(to.params))
     <%= (loading ? 'this.$loading.finish && this.$loading.finish()' : '') %>
     // If not redirected
     if (!nextCalled) {
       next()
     }
-  })
-  .catch((error) => {
+  } catch (error) {
     _lastPaths = []
     error.statusCode = error.statusCode || error.status || (error.response && error.response.status) || 500
     let layout = NuxtError.layout
@@ -184,7 +182,7 @@ function render (to, from, next) {
       this.error(error)
       next(false)
     })
-  })
+  }
 }
 
 // Fix components format in matched, it's due to code-splitting of vue-router