全局设置router和route

Author: kaokei

package.json

@@ -58,6 +58,7 @@
     "vite-plugin-dts": "^4.3.0",
     "vitest": "^2.1.5",
     "vue": "^3.5.13",
+    "vue-router": "^4.4.5",
     "vue-tsc": "^2.1.10"
   },
   "peerDependencies": {

pnpm-lock.yaml

@@ -0,0 +1,3 @@
+<template>
+  <div>AboutView</div>
+</template>

tests/test11/AboutView.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import {
+  RouterLink,
+  RouterView,
+  useRoute,
+  useRouter,
+  Router,
+  RouteLocationNormalizedLoaded,
+} from 'vue-router';
+import { DemoService } from './DemoService';
+import { declareProviders, useService } from '../../src/index';
+import { TYPES } from './router';
+
+defineProps({
+  msg: String,
+});
+
+declareProviders([DemoService]);
+const service = useService(DemoService);
+const route = useRoute();
+const router = useRouter();
+const rootRoute = useService<RouteLocationNormalizedLoaded>(TYPES.route);
+const rootRouter = useService<Router>(TYPES.router);
+
+defineExpose({
+  service,
+  route,
+  router,
+  rootRoute,
+  rootRouter,
+});
+</script>
+
+<template>
+  <div>
+    <div>
+      <div class="msg">{{ msg }}</div>
+      <div class="count">{{ service.count }}</div>
+
+      <button type="button" class="btn-count" @click="service.increaseCount()">
+        Add count
+      </button>
+    </div>
+
+    <div class="fullpath1">{{ route.fullPath }}</div>
+    <div class="fullpath2">{{ rootRoute.fullPath }}</div>
+    <div class="fullpath3">{{ service.route.fullPath }}</div>
+    <div class="fullpath4">{{ service.router.currentRoute.value.fullPath }}</div>
+
+    <nav>
+      <RouterLink class="route-home" to="/">Go to Home</RouterLink>
+      <RouterLink class="route-about" to="/about">Go to About</RouterLink>
+    </nav>
+
+    <main class="main-content">
+      <RouterView />
+    </main>
+  </div>
+</template>

tests/test11/DemoComp.vue

@@ -0,0 +1,16 @@
+import { inject } from 'inversify';
+import { TYPES } from './router';
+
+export class DemoService {
+  public count = 1;
+
+  public increaseCount() {
+    this.count++;
+  }
+
+  @inject(TYPES.route)
+  public route: any;
+
+  @inject(TYPES.router)
+  public router: any;
+}

tests/test11/DemoService.ts

@@ -0,0 +1,3 @@
+<template>
+  <div>HomeView</div>
+</template>

tests/test11/HomeView.vue

@@ -0,0 +1,3 @@
+## 测试场景-当前组件访问当前组件的服务
+
+主要测试了 declareRootProviders 配置全局vue router 和 vue route

tests/test11/README.md

@@ -0,0 +1,108 @@
+import 'reflect-metadata';
+import { flushPromises, mount } from '@vue/test-utils';
+import DemoComp from './DemoComp.vue';
+import { DemoService } from './DemoService';
+import { router, TYPES } from './router';
+import { declareRootProviders, useRootService } from '../../src';
+import { markRaw, App } from 'vue';
+import { useRoute } from 'vue-router';
+
+describe('test11', () => {
+  it('get DemoService instance', async () => {
+    declareRootProviders(container => {
+      container
+        .bind(TYPES.router)
+        .toConstantValue(router)
+        .onActivation((_: any, instance: any) => {
+          return markRaw(instance);
+        });
+    });
+
+    router.push('/');
+    await router.isReady();
+
+    const msg = 'Hello world';
+    const wrapper = mount(DemoComp, {
+      props: {
+        msg,
+      },
+      global: {
+        plugins: [
+          router,
+          (app: App) => {
+            app.runWithContext(() => {
+              const route = useRoute();
+              declareRootProviders(container => {
+                container
+                  .bind(TYPES.route)
+                  .toConstantValue(route)
+                  .onActivation((_: any, instance: any) => {
+                    return markRaw(instance);
+                  });
+              });
+            });
+          },
+        ],
+      },
+    });
+
+    const rootRoute = useRootService(TYPES.route);
+    const rootRouter = useRootService(TYPES.router);
+
+    expect(wrapper.vm.service).toBeInstanceOf(DemoService);
+    expect(router).toBe(rootRouter);
+    expect(router).toBe(wrapper.vm.router);
+    expect(router).toBe(wrapper.vm.rootRouter);
+    expect(router).toBe(wrapper.vm.service.router);
+    expect(rootRoute).toBe(wrapper.vm.rootRoute);
+    expect(rootRouter).toBe(wrapper.vm.rootRouter);
+    expect(rootRoute).toBe(wrapper.vm.service.route);
+    expect(rootRouter).toBe(wrapper.vm.service.router);
+
+    expect(wrapper.get('.msg').text()).toBe(msg);
+    expect(wrapper.get('.count').text()).toBe('1');
+    expect(wrapper.get('.fullpath1').text()).toBe('/');
+    expect(wrapper.get('.fullpath2').text()).toBe('/');
+    expect(wrapper.get('.fullpath3').text()).toBe('/');
+    expect(wrapper.get('.fullpath4').text()).toBe('/');
+    expect(wrapper.get('.main-content').text()).toBe('HomeView');
+
+    await wrapper.get('.btn-count').trigger('click');
+    expect(wrapper.get('.msg').text()).toBe(msg);
+    expect(wrapper.get('.count').text()).toBe('2');
+    expect(wrapper.get('.fullpath1').text()).toBe('/');
+    expect(wrapper.get('.fullpath2').text()).toBe('/');
+    expect(wrapper.get('.fullpath3').text()).toBe('/');
+    expect(wrapper.get('.fullpath4').text()).toBe('/');
+    expect(wrapper.get('.main-content').text()).toBe('HomeView');
+
+    await wrapper.get('.btn-count').trigger('click');
+    expect(wrapper.get('.msg').text()).toBe(msg);
+    expect(wrapper.get('.count').text()).toBe('3');
+    expect(wrapper.get('.fullpath1').text()).toBe('/');
+    expect(wrapper.get('.fullpath2').text()).toBe('/');
+    expect(wrapper.get('.fullpath3').text()).toBe('/');
+    expect(wrapper.get('.fullpath4').text()).toBe('/');
+    expect(wrapper.get('.main-content').text()).toBe('HomeView');
+
+    await wrapper.get('.route-about').trigger('click');
+    await flushPromises();
+    expect(wrapper.get('.msg').text()).toBe(msg);
+    expect(wrapper.get('.count').text()).toBe('3');
+    expect(wrapper.get('.fullpath1').text()).toBe('/about');
+    expect(wrapper.get('.fullpath2').text()).toBe('/about');
+    expect(wrapper.get('.fullpath3').text()).toBe('/about');
+    expect(wrapper.get('.fullpath4').text()).toBe('/about');
+    expect(wrapper.get('.main-content').text()).toBe('AboutView');
+
+    await wrapper.get('.route-home').trigger('click');
+    await flushPromises();
+    expect(wrapper.get('.msg').text()).toBe(msg);
+    expect(wrapper.get('.count').text()).toBe('3');
+    expect(wrapper.get('.fullpath1').text()).toBe('/');
+    expect(wrapper.get('.fullpath2').text()).toBe('/');
+    expect(wrapper.get('.fullpath3').text()).toBe('/');
+    expect(wrapper.get('.fullpath4').text()).toBe('/');
+    expect(wrapper.get('.main-content').text()).toBe('HomeView');
+  });
+});

tests/test11/demo.test.ts

@@ -0,0 +1,19 @@
+import { createWebHistory, createRouter } from 'vue-router';
+
+import HomeView from './HomeView.vue';
+import AboutView from './AboutView.vue';
+
+const routes = [
+  { path: '/', component: HomeView },
+  { path: '/about', component: AboutView },
+];
+
+export const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+export const TYPES = {
+  route: Symbol('route001'),
+  router: Symbol('router001'),
+};