Implement dynamic redirect (#624) (#634)

* Implement dynamic redirect (#624)

* Allow dynamic redirect to return objects

* give redirect function access to the target route

* Add e2e tests for dynamic redirect

* fix e2e tests

* fix e2e tests

* fix e2e tests

Author: fnlctrl

examples/redirect/app.js

@@ -27,6 +27,25 @@ const router = new VueRouter({
     },
     // absolute redirect
     { path: '/absolute-redirect', redirect: '/bar' },
+    // dynamic redirect, note that the target route `to` is available for the redirect function
+    { path: '/dynamic-redirect/:id?',
+      redirect: to => {
+        const { hash, params, query } = to
+        if (query.to === 'foo') {
+          return '/foo'
+        }
+        if (hash === '#baz') {
+          return {
+            name: 'baz'
+          }
+        }
+        if (params.id) {
+          return '/with-params/:id'
+        } else {
+          return '/bar'
+        }
+      }
+    },
     // named redirect
     { path: '/named-redirect', redirect: { name: 'baz' }},
 
@@ -55,6 +74,22 @@ new Vue({
         <li><router-link to="/absolute-redirect">
           /absolute-redirect (redirects to /bar)
         </router-link></li>
+        
+        <li><router-link to="/dynamic-redirect">
+          /dynamic-redirect (redirects to /bar)
+        </router-link></li>
+        
+        <li><router-link to="/dynamic-redirect/123">
+          /dynamic-redirect/123 (redirects to /with-params/123)
+        </router-link></li>
+        
+        <li><router-link to="/dynamic-redirect?to=foo">
+          /dynamic-redirect?to=foo (redirects to /foo)
+        </router-link></li>
+        
+        <li><router-link to="/dynamic-redirect#baz">
+          /dynamic-redirect#baz (redirects to /baz)
+        </router-link></li>
 
         <li><router-link to="/named-redirect">
           /named-redirect (redirects to /baz)

flow/declarations.js

@@ -13,7 +13,7 @@ declare type RouterOptions = {
   scrollBehavior?: Function;
 }
 
-declare type RedirectOption = string | { name: string }
+declare type RedirectOption = string | { name: string } | Function
 
 declare type RouteConfig = {
   path: string;

src/create-matcher.js

@@ -52,7 +52,10 @@ export function createMatcher (routes: Array<RouteConfig>): Matcher {
     location: Location
   ): Route {
     const { query, hash, params } = location
-    const { redirect } = record
+    const { redirect: originalRedirect } = record
+    const redirect = typeof originalRedirect === 'function'
+        ? originalRedirect(createRoute(record, location))
+        : originalRedirect
     const name = redirect && typeof redirect === 'object' && redirect.name
     if (name) {
       // resolved named direct

test/e2e/specs/redirect.js

@@ -3,14 +3,18 @@ module.exports = {
     browser
     .url('http://localhost:8080/redirect/')
       .waitForElementVisible('#app', 1000)
-      .assert.count('li a', 6)
+      .assert.count('li a', 10)
       // assert correct href with base
       .assert.attributeContains('li:nth-child(1) a', 'href', '/redirect/relative-redirect')
       .assert.attributeContains('li:nth-child(2) a', 'href', '/redirect/relative-redirect?foo=bar')
       .assert.attributeContains('li:nth-child(3) a', 'href', '/redirect/absolute-redirect')
-      .assert.attributeContains('li:nth-child(4) a', 'href', '/redirect/named-redirect')
-      .assert.attributeContains('li:nth-child(5) a', 'href', '/redirect/redirect-with-params/123')
-      .assert.attributeContains('li:nth-child(6) a', 'href', '/not-found')
+      .assert.attributeContains('li:nth-child(4) a', 'href', '/redirect/dynamic-redirect')
+      .assert.attributeContains('li:nth-child(5) a', 'href', '/redirect/dynamic-redirect/123')
+      .assert.attributeContains('li:nth-child(6) a', 'href', '/redirect/dynamic-redirect?to=foo')
+      .assert.attributeContains('li:nth-child(7) a', 'href', '/redirect/dynamic-redirect#baz')
+      .assert.attributeContains('li:nth-child(8) a', 'href', '/redirect/named-redirect')
+      .assert.attributeContains('li:nth-child(9) a', 'href', '/redirect/redirect-with-params/123')
+      .assert.attributeContains('li:nth-child(10) a', 'href', '/not-found')
 
       .assert.containsText('.view', 'default')
 
@@ -27,14 +31,30 @@ module.exports = {
       .assert.containsText('.view', 'bar')
 
       .click('li:nth-child(4) a')
-      .assert.urlEquals('http://localhost:8080/redirect/baz')
-      .assert.containsText('.view', 'baz')
+      .assert.urlEquals('http://localhost:8080/redirect/bar')
+      .assert.containsText('.view', 'bar')
 
       .click('li:nth-child(5) a')
       .assert.urlEquals('http://localhost:8080/redirect/with-params/123')
       .assert.containsText('.view', '123')
 
       .click('li:nth-child(6) a')
+      .assert.urlEquals('http://localhost:8080/redirect/foo')
+      .assert.containsText('.view', 'foo')
+
+      .click('li:nth-child(7) a')
+      .assert.urlEquals('http://localhost:8080/redirect/baz')
+      .assert.containsText('.view', 'baz')
+
+      .click('li:nth-child(8) a')
+      .assert.urlEquals('http://localhost:8080/redirect/baz')
+      .assert.containsText('.view', 'baz')
+
+      .click('li:nth-child(9) a')
+      .assert.urlEquals('http://localhost:8080/redirect/with-params/123')
+      .assert.containsText('.view', '123')
+
+      .click('li:nth-child(10) a')
       .assert.urlEquals('http://localhost:8080/redirect/')
       .assert.containsText('.view', 'default')
 
@@ -54,6 +74,26 @@ module.exports = {
       .assert.urlEquals('http://localhost:8080/redirect/bar')
       .assert.containsText('.view', 'bar')
 
+    .url('http://localhost:8080/redirect/dynamic-redirect')
+      .waitForElementVisible('#app', 1000)
+      .assert.urlEquals('http://localhost:8080/redirect/bar')
+      .assert.containsText('.view', 'bar')
+
+    .url('http://localhost:8080/redirect/dynamic-redirect/123')
+      .waitForElementVisible('#app', 1000)
+      .assert.urlEquals('http://localhost:8080/redirect/with-params/123')
+      .assert.containsText('.view', '123')
+
+    .url('http://localhost:8080/redirect/dynamic-redirect?to=foo')
+      .waitForElementVisible('#app', 1000)
+      .assert.urlEquals('http://localhost:8080/redirect/foo')
+      .assert.containsText('.view', 'foo')
+
+    .url('http://localhost:8080/redirect/dynamic-redirect#baz')
+      .waitForElementVisible('#app', 1000)
+      .assert.urlEquals('http://localhost:8080/redirect/baz')
+      .assert.containsText('.view', 'baz')
+
     .url('http://localhost:8080/redirect/named-redirect')
       .waitForElementVisible('#app', 1000)
       .assert.urlEquals('http://localhost:8080/redirect/baz')