fix(ActiveLink): Fix active links when parent link redirects to child

Fix active parent link when parent link redirects to a child and when the user navigates between child links

fix vuejs#2724

examples/active-links/app.js

@@ -17,6 +17,17 @@ const Users = {
 
 const User = { template: '<div>{{ $route.params.username }}</div>' }
 
+const Gallery = {
+  template: `
+    <div>
+      <h2>Gallery</h2>
+      <router-view></router-view>
+    </div>
+  `
+}
+
+const Image = { template: '<div>{{ $route.params.imageId }}</div>' }
+
 const router = new VueRouter({
   mode: 'history',
   base: __dirname,
@@ -27,7 +38,11 @@ const router = new VueRouter({
       children: [
         { path: ':username', name: 'user', component: User }
       ]
-    }
+    },
+    { path: '/gallery', component: Gallery, name: 'gallery',
+      children: [
+        { path: ':imageId', component: Image, name: 'image' }
+      ], redirect: { name: 'image', params: { imageId: 'image1' }}}
   ]
 })
 
@@ -66,6 +81,10 @@ new Vue({
         <router-link tag="li" to="/about">
           <a>/about (active class on outer element)</a>
         </router-link>
+
+        <li><router-link :to="{ name: 'gallery' }">/gallery (redirect to /gallery/image1)</router-link></li>
+        <li><router-link :to="{ name: 'image', params: {imageId: 'image2'} }">/gallery/image2</router-link></li>
+        <li><router-link :to="{ name: 'image', params: {imageId: 'image1'} }">/gallery/image1</router-link></li>
       </ul>
       <router-view class="view"></router-view>
     </div>

src/components/link.js

@@ -2,6 +2,7 @@
 
 import { createRoute, isSameRoute, isIncludedRoute } from '../util/route'
 import { extend } from '../util/misc'
+import { normalizeLocation } from '../util/location'
 
 // work around weird flow bug
 const toTypes: Array<Function> = [String, Object]
@@ -49,8 +50,8 @@ export default {
     const exactActiveClass = this.exactActiveClass == null
       ? exactActiveClassFallback
       : this.exactActiveClass
-    const compareTarget = location.path
-      ? createRoute(null, location, null, router)
+    const compareTarget = route.redirectedFrom
+      ? createRoute(null, normalizeLocation(route.redirectedFrom), null, router)
       : route
 
     classes[exactActiveClass] = isSameRoute(current, compareTarget)

test/e2e/specs/active-links.js

@@ -9,7 +9,7 @@ module.exports = {
     browser
       .url('http://localhost:8080/active-links/')
       .waitForElementVisible('#app', 1000)
-      .assert.count('li a', 11)
+      .assert.count('li a', 14)
       // assert correct href with base
       .assert.attributeContains('li:nth-child(1) a', 'href', '/active-links/')
       .assert.attributeContains('li:nth-child(2) a', 'href', '/active-links/')
@@ -22,6 +22,9 @@ module.exports = {
       .assert.attributeContains('li:nth-child(9) a', 'href', '/active-links/users/evan?foo=bar&baz=qux')
       .assert.attributeContains('li:nth-child(10) a', 'href', '/active-links/about')
       .assert.attributeContains('li:nth-child(11) a', 'href', '/active-links/about')
+      .assert.attributeContains('li:nth-child(12) a', 'href', '/active-links/gallery')
+      .assert.attributeContains('li:nth-child(13) a', 'href', '/active-links/gallery/image2')
+      .assert.attributeContains('li:nth-child(14) a', 'href', '/active-links/gallery/image1')
       .assert.containsText('.view', 'Home')
 
     assertActiveLinks(1, [1, 2], null, [1, 2])
@@ -35,6 +38,9 @@ module.exports = {
     assertActiveLinks(9, [1, 3, 5, 7, 9], null, [9])
     assertActiveLinks(10, [1, 10], [11], [10], [11])
     assertActiveLinks(11, [1, 10], [11], [10], [11])
+    assertActiveLinks(12, [1, 12, 14], null, [14])
+    assertActiveLinks(13, [1, 12, 13], null, [13])
+    assertActiveLinks(14, [1, 12, 14], null, [14])
 
     browser.end()