support nested router (close #1476)

yyx990803 · yyx990803 · commit 759df3697334 · 2017-06-17T01:45:37.000+08:00
diff --git a/examples/index.html b/examples/index.html
@@ -24,6 +24,7 @@ <h1>Vue Router Examples</h1>
     <li><a href="lazy-loading">Lazy Loading</a></li>
     <li><a href="auth-flow">Auth Flow</a></li>
     <li><a href="discrete-components">Discrete Components</a></li>
+    <li><a href="nested-router">Nested Routers</a></li>
   </ul>
 </body>
 </html>
diff --git a/examples/nested-router/app.js b/examples/nested-router/app.js
@@ -0,0 +1,52 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+const Foo = { template: `<div class="foo"><h1>foo</h1></div>` }
+const Bar = { template: `<div class="bar"><h1>bar</h1></div>` }
+
+const childRouter = new VueRouter({
+  mode: 'abstract',
+  routes: [
+    { path: '/foo', component: Foo },
+    { path: '/bar', component: Bar }
+  ]
+})
+
+const Nested = {
+  router: childRouter,
+  template: `<div class="child">
+    <p>Child router path: {{ $route.fullPath }}</p>
+    <ul>
+      <li><router-link to="/foo">/foo</router-link></li>
+      <li><router-link to="/bar">/bar</router-link></li>
+    </ul>
+    <router-view/>
+  </div>`
+}
+
+const router = new VueRouter({
+  mode: 'history',
+  base: __dirname,
+  routes: [
+    { path: '/nested-router', component: Nested },
+    { path: '/foo', component: Foo },
+    { path: '/bar', component: Bar }
+  ]
+})
+
+new Vue({
+  router,
+  template: `
+    <div id="app">
+      <p>Root router path: {{ $route.fullPath }}</p>
+      <ul>
+        <li><router-link to="/nested-router">/nested-router</router-link></li>
+        <li><router-link to="/foo">/foo</router-link></li>
+        <li><router-link to="/bar">/bar</router-link></li>
+      </ul>
+      <router-view></router-view>
+    </div>
+  `
+}).$mount('#app')
diff --git a/examples/nested-router/index.html b/examples/nested-router/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="/global.css">
+<style>
+#app { border: 1px solid red; }
+.child { border: 1px solid blue; padding: 0 15px; margin: 15px; }
+</style>
+<a href="/">&larr; Examples index</a>
+<div id="app"></div>
+<script src="/__build__/shared.js"></script>
+<script src="/__build__/nested-router.js"></script>
diff --git a/src/components/view.js b/src/components/view.js
@@ -23,7 +23,7 @@ export default {
     // has been toggled inactive but kept-alive.
     let depth = 0
     let inactive = false
-    while (parent) {
+    while (parent && !parent._routerRoot) {
       if (parent.$vnode && parent.$vnode.data.routerView) {
         depth++
       }
diff --git a/src/install.js b/src/install.js
@@ -9,14 +9,6 @@ export function install (Vue) {
 
   _Vue = Vue
 
-  Object.defineProperty(Vue.prototype, '$router', {
-    get () { return this.$root._router }
-  })
-
-  Object.defineProperty(Vue.prototype, '$route', {
-    get () { return this.$root._route }
-  })
-
   const isDef = v => v !== undefined
 
   const registerInstance = (vm, callVal) => {
@@ -29,9 +21,12 @@ export function install (Vue) {
   Vue.mixin({
     beforeCreate () {
       if (isDef(this.$options.router)) {
+        this._routerRoot = this
         this._router = this.$options.router
         this._router.init(this)
         Vue.util.defineReactive(this, '_route', this._router.history.current)
+      } else {
+        this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
       }
       registerInstance(this, this)
     },
@@ -40,6 +35,14 @@ export function install (Vue) {
     }
   })
 
+  Object.defineProperty(Vue.prototype, '$router', {
+    get () { return this._routerRoot._router }
+  })
+
+  Object.defineProperty(Vue.prototype, '$route', {
+    get () { return this._routerRoot._route }
+  })
+
   Vue.component('router-view', View)
   Vue.component('router-link', Link)
 
diff --git a/test/e2e/specs/nested-router.js b/test/e2e/specs/nested-router.js
@@ -0,0 +1,28 @@
+module.exports = {
+  'basic': function (browser) {
+    browser
+    .url('http://localhost:8080/nested-router/')
+      .waitForElementVisible('#app', 1000)
+      .assert.count('li a', 3)
+
+      .click('li:nth-child(1) a')
+      .assert.urlEquals('http://localhost:8080/nested-router/nested-router')
+      .assert.containsText('.child', 'Child router path: /')
+      .assert.count('li a', 5)
+
+      .click('.child li:nth-child(1) a')
+      .assert.containsText('.child', 'Child router path: /foo')
+      .assert.containsText('.child .foo', 'foo')
+
+      .click('.child li:nth-child(2) a')
+      .assert.containsText('.child', 'Child router path: /bar')
+      .assert.containsText('.child .bar', 'bar')
+
+      .click('li:nth-child(2) a')
+      .assert.urlEquals('http://localhost:8080/nested-router/foo')
+      .assert.elementNotPresent('.child')
+      .assert.containsText('#app', 'foo')
+      .assert.count('li a', 3)
+      .end()
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ export default {`
`23`	`23`	`// has been toggled inactive but kept-alive.`
`24`	`24`	`let depth = 0`
`25`	`25`	`let inactive = false`
`26`		`- while (parent) {`
	`26`	`+ while (parent && !parent._routerRoot) {`
`27`	`27`	`if (parent.$vnode && parent.$vnode.data.routerView) {`
`28`	`28`	`depth++`
`29`	`29`	`}`