diff --git a/examples/active-links/app.js b/examples/active-links/app.js
index a1a3238d4..1715d58b6 100644
--- a/examples/active-links/app.js
+++ b/examples/active-links/app.js
@@ -17,15 +17,48 @@ const Users = {
const User = { template: '{{ $route.params.username }}
' }
+const Gallery = {
+ template: `
+
+
Gallery
+
+
+ `
+}
+
+const Image = { template: '{{ $route.params.imageId }}
' }
+
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About },
- { path: '/users', component: Users,
+ {
+ path: '/redirect-gallery',
+ name: 'redirect-gallery',
+ redirect: { name: 'gallery' }
+ },
+ {
+ path: '/redirect-image',
+ name: 'redirect-image',
+ redirect: { name: 'image', params: { imageId: 'image1' }}
+ },
+ {
+ path: '/users',
+ component: Users,
+ children: [{ path: ':username', name: 'user', component: User }]
+ },
+ {
+ path: '/gallery',
+ component: Gallery,
children: [
- { path: ':username', name: 'user', component: User }
+ {
+ path: '',
+ name: 'gallery',
+ redirect: { name: 'image', params: { imageId: 'image1' }}
+ },
+ { path: ':imageId', component: Image, name: 'image' }
]
}
]
@@ -66,6 +99,15 @@ new Vue({
/about (active class on outer element)
+
+ /gallery (redirect to /gallery/image1)
+ /gallery named link (redirect to /gallery/image1)
+ /gallery/image2
+ /gallery/image1
+ /redirect-gallery (redirect to /gallery)
+ /redirect-gallery named (redirect to /gallery)
+ /redirect-image (redirect to /gallery/image1)
+ /redirect-image named (redirect to /gallery/image1)
diff --git a/src/components/link.js b/src/components/link.js
index 2662d8263..d944e8b82 100644
--- a/src/components/link.js
+++ b/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 = [String, Object]
@@ -31,26 +32,31 @@ export default {
render (h: Function) {
const router = this.$router
const current = this.$route
- const { location, route, href } = router.resolve(this.to, current, this.append)
+ const { location, route, href } = router.resolve(
+ this.to,
+ current,
+ this.append
+ )
const classes = {}
const globalActiveClass = router.options.linkActiveClass
const globalExactActiveClass = router.options.linkExactActiveClass
// Support global empty active class
- const activeClassFallback = globalActiveClass == null
- ? 'router-link-active'
- : globalActiveClass
- const exactActiveClassFallback = globalExactActiveClass == null
- ? 'router-link-exact-active'
- : globalExactActiveClass
- const activeClass = this.activeClass == null
- ? activeClassFallback
- : this.activeClass
- const exactActiveClass = this.exactActiveClass == null
- ? exactActiveClassFallback
- : this.exactActiveClass
- const compareTarget = location.path
- ? createRoute(null, location, null, router)
+ const activeClassFallback =
+ globalActiveClass == null ? 'router-link-active' : globalActiveClass
+ const exactActiveClassFallback =
+ globalExactActiveClass == null
+ ? 'router-link-exact-active'
+ : globalExactActiveClass
+ const activeClass =
+ this.activeClass == null ? activeClassFallback : this.activeClass
+ const exactActiveClass =
+ this.exactActiveClass == null
+ ? exactActiveClassFallback
+ : this.exactActiveClass
+
+ const compareTarget = route.redirectedFrom
+ ? createRoute(null, normalizeLocation(route.redirectedFrom), null, router)
: route
classes[exactActiveClass] = isSameRoute(current, compareTarget)
@@ -70,7 +76,9 @@ export default {
const on = { click: guardEvent }
if (Array.isArray(this.event)) {
- this.event.forEach(e => { on[e] = handler })
+ this.event.forEach(e => {
+ on[e] = handler
+ })
} else {
on[this.event] = handler
}
@@ -88,9 +96,9 @@ export default {
if (a) {
// in case the is a static node
a.isStatic = false
- const aData = a.data = extend({}, a.data)
+ const aData = (a.data = extend({}, a.data))
aData.on = on
- const aAttrs = a.data.attrs = extend({}, a.data.attrs)
+ const aAttrs = (a.data.attrs = extend({}, a.data.attrs))
aAttrs.href = href
} else {
// doesn't have child, apply listener to self
diff --git a/test/e2e/specs/.prettierrc b/test/e2e/specs/.prettierrc
new file mode 100644
index 000000000..963354f23
--- /dev/null
+++ b/test/e2e/specs/.prettierrc
@@ -0,0 +1,3 @@
+{
+ "printWidth": 120
+}
diff --git a/test/e2e/specs/active-links.js b/test/e2e/specs/active-links.js
index fd142e4e5..686e94af2 100644
--- a/test/e2e/specs/active-links.js
+++ b/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', 19)
// 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,14 @@ 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/')
+ .assert.attributeContains('li:nth-child(14) a', 'href', '/active-links/gallery/image2')
+ .assert.attributeContains('li:nth-child(15) a', 'href', '/active-links/gallery/image1')
+ .assert.attributeContains('li:nth-child(16) a', 'href', '/active-links/redirect-gallery')
+ .assert.attributeContains('li:nth-child(17) a', 'href', '/active-links/redirect-gallery')
+ .assert.attributeContains('li:nth-child(18) a', 'href', '/active-links/redirect-image')
+ .assert.attributeContains('li:nth-child(19) a', 'href', '/active-links/redirect-image')
.assert.containsText('.view', 'Home')
assertActiveLinks(1, [1, 2], null, [1, 2])
@@ -36,6 +44,17 @@ module.exports = {
assertActiveLinks(10, [1, 10], [11], [10], [11])
assertActiveLinks(11, [1, 10], [11], [10], [11])
+ // redirects
+ assertActiveLinks(12, [1, 12, 13, 15], null, [15])
+ assertActiveLinks(13, [1, 12, 13, 15], null, [15])
+ assertActiveLinks(14, [1, 12, 13, 14], null, [14])
+ assertActiveLinks(15, [1, 12, 13, 15], null, [15])
+ // different level redirect
+ assertActiveLinks(16, [1, 12, 13, 15], null, [15])
+ assertActiveLinks(17, [1, 12, 13, 15], null, [15])
+ assertActiveLinks(18, [1, 12, 13, 15], null, [15])
+ assertActiveLinks(19, [1, 12, 13, 15], null, [15])
+
browser.end()
function assertActiveLinks (n, activeA, activeLI, exactActiveA, exactActiveLI) {