public method "reload"

examples/index.html

@@ -25,6 +25,7 @@ <h1>Vue Router Examples</h1>
     <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>
+    <li><a href="reload">Public reload method</a></li>
   </ul>
 </body>
 </html>

examples/reload/app.js

@@ -0,0 +1,142 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Post from '../data-fetching/Post.vue'
+
+Vue.use(VueRouter)
+
+const Home = { template: '<div>home</div>' }
+const Foo = { template: '<div>foo</div>' }
+const Bar = { template: '<div>bar</div>' }
+
+function guardRoute (to, from, next) {
+  if (window.confirm(`Navigate to ${to.path}?`)) {
+    next()
+  } else if (window.confirm(`Redirect to /baz?`)) {
+    next('/baz')
+  } else {
+    next(false)
+  }
+}
+
+// Baz implements an in-component beforeRouteLeave hook
+const Baz = {
+  data () {
+    return { saved: false }
+  },
+  template: `
+    <div>
+      <p>baz ({{ saved ? 'saved' : 'not saved' }})</p>
+      <button @click="saved = true">save</button>
+    </div>
+  `,
+  beforeRouteLeave (to, from, next) {
+    if (this.saved || window.confirm('Not saved, are you sure you want to navigate away?')) {
+      next()
+    } else {
+      next(false)
+    }
+  }
+}
+
+// Baz implements an in-component beforeRouteEnter hook
+const Qux = {
+  data () {
+    return {
+      msg: null
+    }
+  },
+  template: `<div>{{ msg }}</div>`,
+  beforeRouteEnter (to, from, next) {
+    // Note that enter hooks do not have access to `this`
+    // because it is called before the component is even created.
+    // However, we can provide a callback to `next` which will
+    // receive the vm instance when the route has been confirmed.
+    //
+    // simulate an async data fetch.
+    // this pattern is useful when you want to stay at current route
+    // and only switch after the data has been fetched.
+    setTimeout(() => {
+      next(vm => {
+        vm.msg = 'Qux'
+      })
+    }, 300)
+  }
+}
+
+// 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,
+  routes: [
+    { path: '/', component: Home },
+
+    // post with transitions
+    { path: '/post/:id', component: Post },
+
+    // inline guard
+    { path: '/foo', component: Foo, beforeEnter: guardRoute },
+
+    // using meta properties on the route config
+    // and check them in a global before hook
+    { path: '/bar', component: Bar, meta: { needGuard: true }},
+
+    // Baz implements an in-component beforeRouteLeave hook
+    { path: '/baz', component: Baz },
+
+    // Qux implements an in-component beforeRouteEnter hook
+    { path: '/qux', component: Qux },
+
+    // in-component beforeRouteEnter hook for async components
+    { path: '/qux-async', component: resolve => {
+      setTimeout(() => {
+        resolve(Qux)
+      }, 0)
+    } },
+
+    // in-component beforeRouteUpdate hook
+    { path: '/quux/:id', component: Quux }
+  ]
+})
+
+router.beforeEach((to, from, next) => {
+  if (to.matched.some(m => m.meta.needGuard)) {
+    guardRoute(to, from, next)
+  } else {
+    next()
+  }
+})
+
+new Vue({
+  router,
+  template: `
+    <div id="app">
+      <h1>reload() behaviors</h1>
+      <button @click="$router.reload()">$router.reload()</button>
+      <ul>
+        <li><router-link to="/">/</router-link></li>
+        <li><router-link to="/post/1">/post/1</router-link></li>
+        <li><router-link to="/foo">/foo</router-link></li>
+        <li><router-link to="/bar">/bar</router-link></li>
+        <li><router-link to="/baz">/baz</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>
+  `
+}).$mount('#app')

examples/reload/index.html

@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="/global.css">
+<a href="/">&larr; Examples index</a>
+<div id="app"></div>
+<script src="/__build__/shared.chunk.js"></script>
+<script src="/__build__/reload.js"></script>

flow/declarations.js

@@ -91,6 +91,7 @@ declare type Location = {
 declare type RawLocation = string | Location
 
 declare type Route = {
+  _force?: boolean;
   path: string;
   name: ?string;
   hash: string;

src/history/base.js

@@ -97,8 +97,9 @@ export class History {
       }
       onAbort && onAbort(err)
     }
-    if (
-      isSameRoute(route, current) &&
+    if (isSameRoute(route, current) &&
+      // case for public function "reload"
+      !route._force &&
       // in the case the route map has been dynamically appended to
       route.matched.length === current.matched.length
     ) {

src/index.js

@@ -142,6 +142,17 @@ export default class VueRouter {
     this.history.push(location, onComplete, onAbort)
   }
 
+  reload () {
+    const { current } = this.history
+    const result: Object = { _force: true }
+    if (current.hash) result.hash = current.hash
+    if (current.path) result.path = current.path
+    if (current.params) result.params = current.params
+    if (current.query) result.query = current.query
+
+    this.history.push(result)
+  }
+
   replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
     this.history.replace(location, onComplete, onAbort)
   }

src/util/location.js

@@ -53,10 +53,16 @@ export function normalizeLocation (
     hash = `#${hash}`
   }
 
-  return {
+  const result: Object = {
     _normalized: true,
     path,
     query,
     hash
   }
+  // check force
+  if (next._force) {
+    result._force = true
+  }
+
+  return result
 }

src/util/route.js

@@ -31,6 +31,9 @@ export function createRoute (
   if (redirectedFrom) {
     route.redirectedFrom = getFullPath(redirectedFrom, stringifyQuery)
   }
+  if (location._force) {
+    route._force = true
+  }
   return Object.freeze(route)
 }