From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Tue, 11 Jun 2019 10:45:01 +0000 (+0200)
Subject: test(example): add navigation cancel with checbox
X-Git-Tag: v4.0.0-alpha.0~343
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=273b5ba94528b2583eab2405b2aaeeee10dbe012;p=thirdparty%2Fvuejs%2Frouter.git

test(example): add navigation cancel with checbox
---

diff --git a/explorations/html5.html b/explorations/html5.html
index 0507fe49..0ee86547 100644
--- a/explorations/html5.html
+++ b/explorations/html5.html
@@ -11,8 +11,7 @@
       <h2>{{ message }}</h2>
       <pre>{{ $route }}</pre>
       <label>
-        <input type="checkbox" onchange="cancel = !cancel" /> Cancel Next
-        Navigation
+        <input type="checkbox" v-model="shared.cancel" /> Cancel Next Navigation
       </label>
       <ul>
         <li>
diff --git a/explorations/html5.ts b/explorations/html5.ts
index 75edcbb5..22e80923 100644
--- a/explorations/html5.ts
+++ b/explorations/html5.ts
@@ -4,12 +4,13 @@ import Vue from 'vue'
 
 declare global {
   interface Window {
-    cancel: boolean
     vm: Vue
   }
 }
 
-window.cancel = false
+const shared = {
+  cancel: false,
+}
 
 const component: RouteComponent = {
   template: `<div>A component</div>`,
@@ -66,14 +67,19 @@ const router = new Router({
 
 const r = router
 
-r.beforeEach((to, from, next) => {
+const delay = (t: number) => new Promise(resolve => setTimeout(resolve, t))
+
+r.beforeEach(async (to, from, next) => {
   console.log(`Guard from ${from.fullPath} to ${to.fullPath}`)
   if (to.params.id === 'no-name') return next(false)
+
+  const time = Number(to.query.delay)
+  if (time > 0) await delay(time)
   next()
 })
 
 r.beforeEach((to, from, next) => {
-  if (window.cancel) return next(false)
+  if (shared.cancel) return next(false)
   next()
 })
 
@@ -157,6 +163,7 @@ window.vm = new Vue({
   router,
   data: {
     message: 'hello',
+    shared,
   },
 })