Zengtudor
/
Nuxt
mirror of https://github.com/nuxt/nuxt.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2679 from clarkdo/multiple_components 

fix: multiple components in one route
This commit is contained in:
Sébastien Chopin 2018-01-25 11:47:14 +01:00 committed by GitHub
parent fcf99b1140 94bb02901c
commit 6425fb30a5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
lib/app/client.js
View File

@ -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) {

10
lib/app/utils.js
View File

@ -49,17 +49,19 @@ export function sanitizeComponent(Component) {
return Component
}
export function getMatchedComponents(route) {
return [].concat.apply([], route.matched.map(function (m) {
export function getMatchedComponents(route, matches = false) {
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) {
return [].concat.apply([], route.matched.map(function (m) {
export function getMatchedComponentsInstances(route, matches = false) {
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]
})
}))