test(examples): "Public reload method" page /reload

vuejs · ibyteyou · Dec 13, 2018 · Dec 13, 2018 · Dec 13, 2018 · Dec 13, 2018
commit 67b0a87ec6e7aeeb34b013045eefcefb9a1a6fb9
diff --git a/examples/index.html b/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>
diff --git a/examples/reload/app.js b/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')
diff --git a/examples/reload/index.html b/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>