feat(view): handle nested views

diff --git a/__tests__/router-view.spec.js b/__tests__/router-view.spec.js
index 0e01a28429e8c3493d7a32928bcd206d219940ca..3eeb1b28dcc5bb7398fcf36f1bc1d50747187433 100644 (file)
--- a/__tests__/router-view.spec.js
+++ b/__tests__/router-view.spec.js
@@ -7,6 +7,7 @@ require('./helper')
 const expect = require('expect')
 const { default: RouterView } = require('../src/components/View')
 const { components, isMocha } = require('./utils')
+const { START_LOCATION_NORMALIZED } = require('../src/types')
 
 /** @typedef {import('../src/types').RouteLocationNormalized} RouteLocationNormalized */
 
@@ -22,6 +23,33 @@ const routes = {
     // meta: {},
     matched: [{ components: { default: components.Home }, path: '/' }],
   },
+  nested: {
+    fullPath: '/a',
+    name: undefined,
+    path: '/a',
+    query: {},
+    params: {},
+    hash: '',
+    // meta: {},
+    matched: [
+      { components: { default: components.Nested }, path: '/' },
+      { components: { default: components.Foo }, path: 'a' },
+    ],
+  },
+  nestedNested: {
+    fullPath: '/a/b',
+    name: undefined,
+    path: '/a/b',
+    query: {},
+    params: {},
+    hash: '',
+    // meta: {},
+    matched: [
+      { components: { default: components.Nested }, path: '/' },
+      { components: { default: components.Nested }, path: 'a' },
+      { components: { default: components.Foo }, path: 'b' },
+    ],
+  },
   named: {
     fullPath: '/',
     name: undefined,
@@ -52,6 +80,7 @@ describe('RouterView', () => {
         // https://github.com/vuejs/vue-test-utils/issues/918
         props,
       },
+      stubs: { RouterView },
       mocks: { $route },
     })
     return wrapper
@@ -66,4 +95,24 @@ describe('RouterView', () => {
     const wrapper = factory(routes.named, { name: 'foo' })
     expect(wrapper.html()).toMatchInlineSnapshot(`"<div>Foo</div>"`)
   })
+
+  it('displays nothing when route is unmatched', async () => {
+    const wrapper = factory(START_LOCATION_NORMALIZED)
+    // NOTE: I wonder if this will stay stable in future releases
+    expect(wrapper.html()).toMatchInlineSnapshot(`undefined`)
+  })
+
+  it('displays nested views', async () => {
+    const wrapper = factory(routes.nested)
+    expect(wrapper.html()).toMatchInlineSnapshot(
+      `"<div><h2>Nested</h2><div>Foo</div></div>"`
+    )
+  })
+
+  it('displays deeply nested views', async () => {
+    const wrapper = factory(routes.nestedNested)
+    expect(wrapper.html()).toMatchInlineSnapshot(
+      `"<div><h2>Nested</h2><div><h2>Nested</h2><div>Foo</div></div></div>"`
+    )
+  })
 })

diff --git a/__tests__/utils.ts b/__tests__/utils.ts
index 61f72f9abc93a538b50abdf6aef89ec69be45a0a..83ae2fafcb0a5b73b732a0341b22809f6e6b25de 100644 (file)
--- a/__tests__/utils.ts
+++ b/__tests__/utils.ts
@@ -44,6 +44,10 @@ export const components = {
   Home: { render: (h: Function) => h('div', {}, 'Home') },
   Foo: { render: (h: Function) => h('div', {}, 'Foo') },
   Bar: { render: (h: Function) => h('div', {}, 'Bar') },
+  Nested: {
+    render: (h: Function) =>
+      h('div', {}, [h('h2', {}, 'Nested'), h('RouterView')]),
+  },
 }
 
 // allow using a .jest modifider to skip some tests on mocha

diff --git a/src/components/View.ts b/src/components/View.ts
index 7316d8487b941d01183d5cf6a0a92fc9f6d66ab2..07a336541ba7e244046f47d855b33c3e42361bd5 100644 (file)
--- a/src/components/View.ts
+++ b/src/components/View.ts
@@ -23,8 +23,29 @@ const View: Component = {
     // @ts-ignore $route is added by our typings
     const route = parent.$route
 
+    // determine current view depth, also check to see if the tree
+    // has been toggled inactive but kept-alive.
+    let depth = 0
+    // let inactive = false
+    // @ts-ignore
+    while (parent && parent._routerRoot !== parent) {
+      const vnodeData = parent.$vnode && parent.$vnode.data
+      if (vnodeData) {
+        // @ts-ignore
+        if (vnodeData.routerView) {
+          depth++
+        }
+        // if (vnodeData.keepAlive && parent._inactive) {
+        //   inactive = true
+        // }
+      }
+      parent = parent.$parent
+    }
+    // @ts-ignore for devtools
+    data.routerViewDepth = depth
+
     // TODO: support nested router-views
-    const matched = route.matched[0]
+    const matched = route.matched[depth]
 
     // render empty node if no matched route
     if (!matched) return h()