example + test for beforeRouteUpdate

Author: yyx990803

examples/navigation-guards/app.js

@@ -71,6 +71,22 @@ const Qux = {
   }
 }
 
+// Quux implements an in-component beforeRouteUpdate hook.
+// this hook is called when the component is reused, but the route is updated.
+// For example, when navigating from /quux/1 to /quux/2.
+const Quux = {
+  data () {
+    return {
+      prevId: 0
+    }
+  },
+  template: `<div>id:{{ $route.params.id }} prevId:{{ prevId }}</div>`,
+  beforeRouteUpdate (to, from, next) {
+    this.prevId = from.params.id
+    next()
+  }
+}
+
 const router = new VueRouter({
   mode: 'history',
   base: __dirname,
@@ -95,7 +111,10 @@ const router = new VueRouter({
       setTimeout(() => {
         resolve(Qux)
       }, 0)
-    } }
+    } },
+
+    // in-component beforeRouteUpdate hook
+    { path: '/quux/:id', component: Quux }
   ]
 })
 
@@ -119,6 +138,8 @@ new Vue({
         <li><router-link to="/baz">/baz</router-link></li>
         <li><router-link to="/qux">/qux</router-link></li>
         <li><router-link to="/qux-async">/qux-async</router-link></li>
+        <li><router-link to="/quux/1">/quux/1</router-link></li>
+        <li><router-link to="/quux/2">/quux/2</router-link></li>
       </ul>
       <router-view class="view"></router-view>
     </div>

test/e2e/runner.js

@@ -14,7 +14,7 @@ if (args.indexOf('--env') === -1) {
 }
 var i = args.indexOf('--test')
 if (i > -1) {
-  args[i + 1] = 'test/e2e/specs/' + args[i + 1]
+  args[i + 1] = 'test/e2e/specs/' + args[i + 1].replace(/\.js$/, '') + '.js'
 }
 if (args.indexOf('phantomjs') > -1) {
   process.env.PHANTOMJS = true

test/e2e/specs/navigation-guards.js

@@ -8,7 +8,7 @@ module.exports = {
     browser
     .url('http://localhost:8080/navigation-guards/')
       .waitForElementVisible('#app', 1000)
-      .assert.count('li a', 6)
+      .assert.count('li a', 8)
       .assert.containsText('.view', 'home')
 
       .click('li:nth-child(2) a')
@@ -119,6 +119,17 @@ module.exports = {
       .waitFor(300)
       .assert.urlEquals('http://localhost:8080/navigation-guards/qux-async')
       .assert.containsText('.view', 'Qux')
+
+    // beforeRouteUpdate
+    .click('li:nth-child(7) a')
+      .assert.urlEquals('http://localhost:8080/navigation-guards/quux/1')
+      .assert.containsText('.view', 'id:1 prevId:0')
+    .click('li:nth-child(8) a')
+      .assert.urlEquals('http://localhost:8080/navigation-guards/quux/2')
+      .assert.containsText('.view', 'id:2 prevId:1')
+    .click('li:nth-child(7) a')
+      .assert.urlEquals('http://localhost:8080/navigation-guards/quux/1')
+      .assert.containsText('.view', 'id:1 prevId:2')
       .end()
   }
 }