feat: working version of simple router-view

diff --git a/explorations/html5.html b/explorations/html5.html
index 8f31cb5cf557f6e46ff5d50450a03e93ddbf8165..c2cd7fb725b6962f0268bb660c4cec79b243513c 100644 (file)
--- a/explorations/html5.html
+++ b/explorations/html5.html
@@ -13,6 +13,7 @@
         <input type="checkbox" onchange="cancel = !cancel" /> Cancel Next
         Navigation
       </label>
+      <router-view></router-view>
     </div>
   </body>
 </html>

diff --git a/explorations/html5.ts b/explorations/html5.ts
index 05f1770e1dcc8ce5347e16927ac583c1c44713ed..40c6343e86167824c7c2aebdc98a8bb6c45aa39f 100644 (file)
--- a/explorations/html5.ts
+++ b/explorations/html5.ts
@@ -15,6 +15,14 @@ const component: RouteComponent = {
   template: `<div>A component</div>`,
 }
 
+const Home: RouteComponent = {
+  template: `<div>Home</div>`,
+}
+
+const User: RouteComponent = {
+  template: `<div>User: {{ $route.params.id }}</div>`,
+}
+
 const GuardedWithLeave: RouteComponent = {
   template: `<div>
     <p>try to leave</p>
@@ -28,8 +36,8 @@ const GuardedWithLeave: RouteComponent = {
 const router = new Router({
   history: new HTML5History(),
   routes: [
-    { path: '/', component },
-    { path: '/users/:id', name: 'user', component },
+    { path: '/', component: Home },
+    { path: '/users/:id', name: 'user', component: User },
     { path: '/n/:n', name: 'increment', component },
     { path: '/multiple/:a/:b', name: 'user', component },
     {
@@ -107,19 +115,19 @@ async function run() {
     path: '/',
   })
 
-  // await r.push({
-  //   name: 'user',
-  //   params: {
-  //     id: '6',
-  //   },
-  // })
+  await r.push({
+    name: 'user',
+    params: {
+      id: '6',
+    },
+  })
 
-  // await r.push({
-  //   name: 'user',
-  //   params: {
-  //     id: '5',
-  //   },
-  // })
+  await r.push({
+    name: 'user',
+    params: {
+      id: '5',
+    },
+  })
 
   // try {
   //   await r.push({

diff --git a/src/components/View.ts b/src/components/View.ts
index 0837e19501cdd81ab034b27f4a21212ef7d9d6e1..23df951a056942f29d5700ad212f806f5301c513 100644 (file)
--- a/src/components/View.ts
+++ b/src/components/View.ts
@@ -17,6 +17,8 @@ const View: FunctionalComponentOptions = {
     // @ts-ignore
     const route = parent.$route
 
+    console.log('rendering', route)
+
     // TODO: support nested router-views
     const matched = route.matched[0]
 

diff --git a/src/index.ts b/src/index.ts
index c11583cfcc5a25c8df28056d350b7e96cbf9ce6c..db8c4e6e700fa6071772c4214f46639d58ab019a 100644 (file)
--- a/src/index.ts
+++ b/src/index.ts
@@ -14,7 +14,17 @@ const plugin: PluginFunction<void> = Vue => {
         this._router = this.$options.router
         // this._router.init(this)
         // @ts-ignore
-        Vue.util.defineReactive(this, '_route', this._router.currentRoute)
+        this._router.app = this
+        // @ts-ignore
+        Vue.util.defineReactive(
+          // @ts-ignore
+          this,
+          '_route',
+          // @ts-ignore
+          this._router.currentRoute
+          // undefined,
+          // true
+        )
       } else {
         // @ts-ignore
         this._routerRoot = (this.$parent && this.$parent._routerRoot) || this

diff --git a/src/router.ts b/src/router.ts
index f5450439acafef351805576ce34be96139c4dfab..a474513bd6b5bcf26ad4826470f9164db3e4859c 100644 (file)
--- a/src/router.ts
+++ b/src/router.ts
@@ -32,6 +32,7 @@ export class Router {
   private beforeGuards: NavigationGuard[] = []
   private afterGuards: PostNavigationGuard[] = []
   currentRoute: Readonly<RouteLocationNormalized> = START_LOCATION_NORMALIZED
+  private app: any
 
   constructor(options: RouterOptions) {
     this.history = options.history
@@ -53,8 +54,9 @@ export class Router {
           ...to,
           ...matchedRoute,
         }
+        this.updateReactiveRoute()
       } catch (error) {
-        // TODO: use the push/replace techieque with any navigation to
+        // TODO: use the push/replace technique with any navigation to
         // preserve history when moving forward
         if (error instanceof NavigationGuardRedirect) {
           this.push(error.to)
@@ -184,7 +186,11 @@ export class Router {
 
     // TODO: should we throw an error as the navigation was aborted
     // TODO: needs a proper check because order could be different
-    if (this.currentRoute.fullPath === url.fullPath) return this.currentRoute
+    if (
+      this.currentRoute !== START_LOCATION_NORMALIZED &&
+      this.currentRoute.fullPath === url.fullPath
+    )
+      return this.currentRoute
 
     const toLocation: RouteLocationNormalized = location
     // trigger all guards, throw if navigation is rejected
@@ -205,6 +211,7 @@ export class Router {
 
     const from = this.currentRoute
     this.currentRoute = toLocation
+    this.updateReactiveRoute()
 
     // navigation is confirmed, call afterGuards
     for (const guard of this.afterGuards) guard(toLocation, from)
@@ -323,4 +330,9 @@ export class Router {
       if (i > -1) this.afterGuards.splice(i, 1)
     }
   }
+
+  private updateReactiveRoute() {
+    if (!this.app) return
+    this.app._route = this.currentRoute
+  }
 }