feat: commit codes

apps/vue-app/src/App.vue

@@ -1,13 +1,18 @@
 <script setup lang="ts">
-import { useRoute } from 'vue-router'
 
-const route = useRoute()
 </script>
 
 <template>
   <div>
+    <h1>Vue3</h1>
     <div>
-      <RouterView />
+      <router-view v-slot="{ Component }">
+        <transition>
+          <keep-alive>
+            <component :is="Component" />
+          </keep-alive>
+        </transition>
+      </router-view>
     </div>
     <div class="border-t">
       <RouterLink to="/">

apps/vue-app/src/main.ts

@@ -11,9 +11,13 @@ if (window.__POWERED_BY_WUJIE__) {
     instance = createApp(App)
     instance.use(router)
     instance.mount('#app')
+    window.$router = router
+    window.$instance = instance
   }
   window.__WUJIE_UNMOUNT = () => {
     instance.unmount()
+    delete window.$router
+    delete window.$instance
   }
 }
 else {

apps/vue-app/src/pages/bar.vue

@@ -5,6 +5,7 @@
 <template>
   <div>
     bar
+    <input type="range">
   </div>
 </template>
 

apps/vue-app/src/pages/foo.vue

@@ -5,6 +5,7 @@
 <template>
   <div>
     foo
+    <input type="range">
   </div>
 </template>
 

apps/vue-app/src/pages/index.vue

@@ -5,6 +5,7 @@
 <template>
   <div>
     index
+    <input type="range">
   </div>
 </template>
 

apps/vue-app/src/style.css

@@ -5,7 +5,7 @@
 a {
   @apply block text-slate-400 border-current font-semibold underline;
 
-  &.router-link-active {
+  &.router-link-exact-active {
     @apply text-sky-500;
   }
 }

apps/vue2-app/src/App.vue

@@ -1,7 +1,29 @@
+<script setup lang="ts">
+
+</script>
+
 <template>
-  <transition>
-    <keep-alive>
-      <RouterView />
-    </keep-alive>
-  </transition>
+  <div>
+    <h1>Vue2</h1>
+    <div>
+      <transition>
+        <keep-alive>
+          <router-view />
+        </keep-alive>
+      </transition>
+    </div>
+    <div class="border-t">
+      <RouterLink to="/">
+        Index
+      </RouterLink>
+      <RouterLink to="/foo">
+        Foo
+      </RouterLink>
+      <RouterLink to="/bar">
+        Bar
+      </RouterLink>
+    </div>
+  </div>
 </template>
+
+<style scoped></style>

apps/vue2-app/src/main.ts

@@ -1,17 +1,25 @@
 import Vue from 'vue'
 import './style.css'
 import { PiniaVuePlugin, createPinia } from 'pinia'
+import VueRouter from 'vue-router'
 import App from './App.vue'
-import router from './router'
+import { routes } from './router'
 
 Vue.use(PiniaVuePlugin)
 Vue.config.productionTip = false
 
 const pinia = createPinia()
-/* eslint-disable no-new */
-new Vue({
-  el: '#app',
-  router,
-  render: h => h(App),
-  pinia,
-})
+
+if (window.__POWERED_BY_WUJIE__) {
+  let instance
+  window.__WUJIE_MOUNT = () => {
+    const router = new VueRouter({ routes })
+    instance = new Vue({ router, render: h => h(App), pinia }).$mount('#app')
+  }
+  window.__WUJIE_UNMOUNT = () => {
+    instance.$destroy()
+  }
+}
+else {
+  new Vue({ router: new VueRouter({ routes }), render: h => h(App), pinia }).$mount('#app')
+}

apps/vue2-app/src/pages/bar.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>
+    bar
+    <input type="range">
+  </div>
+</template>
+
+<style scoped>
+
+</style>

apps/vue2-app/src/pages/foo.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>
+    foo
+    <input type="range">
+  </div>
+</template>
+
+<style scoped>
+
+</style>

apps/vue2-app/src/pages/index.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>
+    index
+    <input type="range">
+  </div>
+</template>
+
+<style scoped></style>

apps/vue2-app/src/router.ts

@@ -1,18 +1,15 @@
 import Vue from 'vue'
 import type { RouteConfig } from 'vue-router'
 import VueRouter from 'vue-router'
-import HelloWorld from './components/HelloWorld.vue'
 
-Vue.use(VueRouter)
+import Index from './pages/index.vue'
+import Bar from './pages/bar.vue'
+import Foo from './pages/foo.vue'
 
 export const routes: RouteConfig[] = [
-  { path: '/', component: HelloWorld, props: { msg: 'Home' } },
-  { path: '/bar', component: HelloWorld, props: { msg: 'Bar' } },
+  { path: '/', component: Index },
+  { path: '/foo', component: Foo },
+  { path: '/Bar', component: Bar },
 ]
 
-const router = new VueRouter({
-  mode: 'history',
-  routes,
-})
-
-export default router
+Vue.use(VueRouter)

apps/vue2-app/src/style.css

@@ -1,3 +1,11 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+a {
+  @apply block text-slate-400 border-current font-semibold underline;
+
+  &.router-link-exact-active {
+    @apply text-sky-500;
+  }
+}