test(example): add navigation cancel with checbox

diff --git a/explorations/html5.html b/explorations/html5.html
index 0507fe49429318e7d52b7251cbb27a62c83d2a5a..0ee86547339ef8e2b9d5184264cd66a4ea6ae21f 100644 (file)
--- 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 75edcbb58415acd34553b4a595a61fd8c29af563..22e8092362a93b36f4bfa29f0901512acc8d5ba2 100644 (file)
--- 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,
   },
 })