Merge pull request #2679 from clarkdo/multiple_components

fix: multiple components in one route

lib/app/client.js

@@ -204,7 +204,8 @@ async function render (to, from, next) {
     <% if(loading) { %>if (from.path !== path.path && this.$loading.pause) this.$loading.pause()<% } %>
     if (nextCalled) return
     nextCalled = true
-    _lastPaths = getMatchedComponents(from).map((Component, i) => compile(from.matched[i].path)(from.params))
+    const matches = []
+    _lastPaths = getMatchedComponents(from, matches).map((Component, i) => compile(from.matched[matches[i]].path)(from.params))
     next(path)
   }
 
@@ -218,7 +219,8 @@ async function render (to, from, next) {
   this._hadError = !!app.nuxt.err
 
   // Get route's matched components
-  const Components = getMatchedComponents(to)
+  const matches = []
+  const Components = getMatchedComponents(to, matches)
 
   // If no Components matched, generate 404
   if (!Components.length) {
@@ -283,7 +285,7 @@ async function render (to, from, next) {
     // Call asyncData & fetch hooks on components matched by the route.
     await Promise.all(Components.map((Component, i) => {
       // Check if only children route changed
-      Component._path = compile(to.matched[i].path)(to.params)
+      Component._path = compile(to.matched[matches[i]].path)(to.params)
       Component._dataRefresh = false
       // Check if Component need to be refreshed (call asyncData & fetch)
       // Only if its slug has changed or is watch query changes
@@ -335,7 +337,7 @@ async function render (to, from, next) {
     // If not redirected
     if (!nextCalled) {
       <% if (loading) { %>if(this.$loading.finish) this.$loading.finish()<% } %>
-      _lastPaths = Components.map((Component, i) => compile(to.matched[i].path)(to.params))
+      _lastPaths = Components.map((Component, i) => compile(to.matched[matches[i]].path)(to.params))
       next()
     }
 
@@ -390,11 +392,12 @@ function fixPrepatch(to, ___) {
   if (this._pathChanged === false && this._queryChanged === false) return
 
   Vue.nextTick(() => {
-    const instances = getMatchedComponentsInstances(to)
+    const matches = []
+    const instances = getMatchedComponentsInstances(to, matches)
 
     instances.forEach((instance, i) => {
       if (!instance) return
-      if (to.matched[i].path.indexOf(':') === -1) return // If not a dyanmic route, skip
+      if (to.matched[matches[i]].path.indexOf(':') === -1) return // If not a dyanmic route, skip
       if (instance.constructor._dataRefresh && _lastPaths[i] === instance.constructor._path && typeof instance.constructor.options.data === 'function') {
         const newData = instance.constructor.options.data.call(instance)
         for (let key in newData) {

lib/app/utils.js

@@ -49,17 +49,19 @@ export function sanitizeComponent(Component) {
   return Component
 }
 
-export function getMatchedComponents(route) {
+export function getMatchedComponents(route, matches = false) {
-  return [].concat.apply([], route.matched.map(function (m) {
+  return [].concat.apply([], route.matched.map(function (m, index) {
     return Object.keys(m.components).map(function (key) {
+      matches && matches.push(index)
       return m.components[key]
     })
   }))
 }
 
-export function getMatchedComponentsInstances(route) {
+export function getMatchedComponentsInstances(route, matches = false) {
-  return [].concat.apply([], route.matched.map(function (m) {
+  return [].concat.apply([], route.matched.map(function (m, index) {
     return Object.keys(m.instances).map(function (key) {
+      matches && matches.push(index)
       return m.instances[key]
     })
   }))