chore: add absolute nested aliases in playground

diff --git a/playground/App.vue b/playground/App.vue
index 2c63a485b8c91601136be20ae4ac240b8cab9304..a18060e6f2be0f39cbe7032bf2d26f847a307d71 100644 (file)
--- a/playground/App.vue
+++ b/playground/App.vue
@@ -61,10 +61,13 @@
         <a href="/documents/€">/documents/€ (force reload): not valid tho</a>
       </li>
       <li>
-        <router-link to="/">Home (redirects)</router-link>
+        <router-link to="/home">Home (redirects)</router-link>
       </li>
       <li>
-        <router-link to="/home">Home</router-link>
+        <router-link to="/">Home</router-link>
+      </li>
+      <li>
+        <router-link to="/always-redirect">/always-redirect</router-link>
       </li>
       <li>
         <router-link to="/nested">/nested</router-link>
@@ -107,6 +110,23 @@
       <li>
         <router-link to="/rep/a/b">/rep/a/b</router-link>
       </li>
+      <li>
+        <router-link to="/parent/1">/parent/1</router-link>
+      </li>
+      <li>
+        <router-link to="/p/1">/p/1</router-link>
+      </li>
+      <li>
+        <router-link to="/parent/1/as-absolute-a"
+          >/parent/1/as-absolute-a</router-link
+        >
+      </li>
+      <li>
+        <router-link to="/p/1/as-absolute-a">/p/1/as-absolute-a</router-link>
+      </li>
+      <li>
+        <router-link to="/p_1/absolute-a">/p_1/absolute-a</router-link>
+      </li>
     </ul>
     <!-- <transition
       name="fade"

diff --git a/playground/router.ts b/playground/router.ts
index 1981d6eb6487d153e962f199bbe4b02f1568bcb7..f0ebdb068a5a96f3b4913b900f50bd214192898d 100644 (file)
--- a/playground/router.ts
+++ b/playground/router.ts
@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from '../src'
 import Home from './views/Home.vue'
 import Nested from './views/Nested.vue'
+import NestedWithId from './views/NestedWithId.vue'
 import Dynamic from './views/Dynamic.vue'
 import User from './views/User.vue'
 import NotFound from './views/NotFound.vue'
@@ -18,7 +19,14 @@ export const routerHistory = createWebHistory()
 export const router = createRouter({
   history: routerHistory,
   routes: [
+    { path: '/home', redirect: '/' },
     { path: '/', component: Home },
+    {
+      path: '/always-redirect',
+      component: Home,
+      beforeEnter: (to, from, next) =>
+        next('/users/' + Math.round(Math.random() * 100)),
+    },
     { path: '/users/:id', name: 'user', component: User, props: true },
     { path: '/documents/:id', name: 'docs', component: User },
     { path: encodeURI('/n/€'), name: 'euro', component },
@@ -79,6 +87,28 @@ export const router = createRouter({
           component: Nested,
           name: 'NestedOther',
         },
+        {
+          path: 'also-as-absolute',
+          alias: '/absolute',
+          name: 'absolute-child',
+          component: Nested,
+        },
+      ],
+    },
+
+    {
+      path: '/parent/:id',
+      name: 'parent',
+      component: NestedWithId,
+      props: true,
+      alias: '/p/:id',
+      children: [
+        // empty child
+        { path: '', component },
+        // child with absolute path. we need to add an `id` because the parent needs it
+        { path: '/p_:id/absolute-a', alias: 'as-absolute-a', component },
+        // same as above but the alias is absolute
+        { path: 'as-absolute-b', alias: '/p_:id/absolute-b', component },
       ],
     },
     {

diff --git a/playground/views/Home.vue b/playground/views/Home.vue
index c59064b5af1ec340126f166979420b3d51b24c15..e32da0a4d97b7a236477009c99e84011a1575e7f 100644 (file)
--- a/playground/views/Home.vue
+++ b/playground/views/Home.vue
@@ -3,6 +3,7 @@
     <div>Home</div>
     <p>My Data is: {{ someData }}</p>
     toggle: {{ log(toggle) }}
+    <button @click="counter++">{{ counter }}</button>
   </div>
 </template>
 
@@ -14,6 +15,7 @@ export default defineComponent({
   name: 'Home',
   data: () => ({
     toggle: false,
+    counter: 0,
   }),
 
   setup() {

diff --git a/playground/views/Nested.vue b/playground/views/Nested.vue
index e2daa7195ce189519718988ce9980cc95952b763..654a83884204e120236650187891a99f78644db4 100644 (file)
--- a/playground/views/Nested.vue
+++ b/playground/views/Nested.vue
@@ -42,6 +42,19 @@
       <li>
         <router-link to="/anidado/otherAlias">/anidado/otherAlias</router-link>
       </li>
+      <li>
+        <router-link to="/nested/also-as-absolute"
+          >/nested/also-as-absolute</router-link
+        >
+      </li>
+      <li>
+        <router-link to="/absolute">/absolute</router-link>
+      </li>
+      <li>
+        <router-link :to="{ name: 'absolute-child' }"
+          >/absolute (named)</router-link
+        >
+      </li>
     </ul>
     <router-view v-if="level < 6"></router-view>
   </div>

diff --git a/playground/views/NestedWithId.vue b/playground/views/NestedWithId.vue
new file mode 100644 (file)
index 0000000..764aa94
--- /dev/null
+++ b/playground/views/NestedWithId.vue
@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <p>Nested level {{ level }}</p>
+    <pre>{{ props }}</pre>
+    <ul v-if="level === 1">
+      <li>
+        <router-link to="/nested/nested">/nested/nested</router-link>
+      </li>
+      <li>
+        <router-link to="/anidado/nested">/anidado/nested</router-link>
+      </li>
+      <li>
+        <router-link to="/anidado/a">/anidado/a</router-link>
+      </li>
+    </ul>
+    <router-view v-if="level < 6"></router-view>
+  </div>
+</template>
+
+<script>
+import { defineComponent, inject, provide } from 'vue'
+// import { guardSymbol } from '../../src/components/View'
+
+export default defineComponent({
+  props: ['id'],
+  name: 'NestedWithId',
+  setup(props) {
+    const level = inject('level', 1)
+    provide('level', level + 1)
+    // const registerGuard = inject(guardSymbol)
+    // await registerGuard()
+    // console.log('done waiting')
+
+    return {
+      props,
+      level,
+    }
+  },
+})
+</script>