feat: useRoute and useRouter Hook

src/hooks/router.ts

@@ -1,11 +1,44 @@
 import { Navigates } from '@/utils/router/navigates';
+import { useRouterStore } from '@/state/modules/router';
+import { RouteLocationNormalized } from '@/types/router/route';
 
-const navigates = new Navigates();
+const router = new Navigates();
 
+/**
+ * 路由hook
+ */
 export function useRouter() {
-  return navigates;
+  return router;
 }
 
-export function useRoute() {
+/**
+ * 获取当前Route信息
+ * 推荐在onLoad中调用此hook
+ * getCurrentPages方法在不同平台有差异
+ * 在微信小程序中只有在onLoad中才能获取到query
+ * @return RouteLocationNormalized
+ */
+export function useRoute(): RouteLocationNormalized {
   const currentPages = getCurrentPages();
+  const currentPage = currentPages[currentPages.length - 1];
+  const path = currentPage?.route || '';
+  const routerStore = useRouterStore();
+  const currentRoute = routerStore.getRoutes?.get(path as string);
+  let query = {};
+  /* #ifndef MP-WEIXIN */
+  // @ts-ignore
+  query = currentPage?.$page?.options || {};
+  /* #endif */
+
+  /* #ifdef MP-WEIXIN */
+  // @ts-ignore
+  query = currentPage?.options || {};
+  /* #endif */
+  return {
+    currentPages,
+    currentPage,
+    path,
+    currentRoute,
+    query,
+  };
 }

src/pages.json

@@ -58,11 +58,17 @@
       "path": "list/test1/index",
       "style": {
         "navigationBarTitleText": "test1"
+      },
+      "meta": {
+        "ignoreAuth": true
       }
     },{
       "path": "list/test2/index",
       "style": {
         "navigationBarTitleText": "test2"
+      },
+      "meta": {
+        "ignoreAuth": true
       }
     }]
   }, {
@@ -71,6 +77,9 @@
       "path": "detail/index",
       "style": {
         "navigationBarTitleText": "Detail"
+      },
+      "meta": {
+        "ignoreAuth": true
       }
     }]
   }],

src/pages/demo/index.vue

@@ -1,5 +1,14 @@
 <script lang="ts" setup>
+  import BasicButton from '@/components/BasicButton/index.vue';
   import AppProvider from '@/components/AppProvider/inedx.vue';
+  import { useRoute, useRouter } from '@/hooks/router';
+
+  const router = useRouter();
+  const jumpList1 = () => {
+    router.push('/pagesA/list/test1/index?key=words&page=1&limit=15');
+  };
+
+  const route = useRoute();
 </script>
 
 <template>
@@ -9,6 +18,7 @@
       <view>item1</view>
       <view>item2</view>
     </view>
+    <BasicButton @click="jumpList1">List1 → </BasicButton>
   </AppProvider>
 </template>
 

src/pages/index/index.vue

@@ -2,9 +2,10 @@
   import BasicButton from '@/components/BasicButton/index.vue';
   import AppProvider from '@/components/AppProvider/inedx.vue';
   import { ref } from 'vue';
-  import { router } from '@/utils/router';
+  import { useRouter } from '@/hooks/router';
   const title = ref('uni-app vue3 ts --Vite');
-  console.log('感受到考虑到垮落法');
+
+  const router = useRouter();
   const handleGetStarted = () => {
     router.pushTab('/pages/demo/index?d=str');
   };

src/pagesA/list/test1/index.vue

@@ -1,3 +1,14 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
-<template> Test1 </template>
+  import BasicButton from '@/components/BasicButton/index.vue';
+  import { useRouter } from '@/hooks/router';
+
+  const router = useRouter();
+  const jumpTest2 = () => {
+    router.push('/pagesA/list/test2/index?id=256');
+  };
+</script>
+<template>
+  <view> Test1 </view>
+  <BasicButton @click="jumpTest2">Test2 → </BasicButton>
+</template>
 <style scoped></style>

src/pagesA/list/test2/index.vue

@@ -1,3 +1,14 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
-<template> Test2 </template>
+  import BasicButton from '@/components/BasicButton/index.vue';
+  import { useRouter } from '@/hooks/router';
+
+  const router = useRouter();
+  const jumpDetail = () => {
+    router.push('/pagesB/detail/index?page=1&limit=20');
+  };
+</script>
+<template>
+  <view> Test2 </view>
+  <BasicButton @click="jumpDetail">Detail → </BasicButton>
+</template>
 <style scoped></style>

src/pagesB/detail/index.vue

@@ -1,3 +1,12 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+  import { useRoute } from '@/hooks/router';
+  import { onLoad } from '@dcloudio/uni-app';
+
+  // const route = useRoute();
+
+  onLoad(() => {
+    const route = useRoute();
+  });
+</script>
 <template> Detail </template>
 <style scoped></style>

src/state/modules/router.ts

@@ -1,10 +1,10 @@
 import { defineStore } from 'pinia';
-import { Pages } from '@/types/pages';
+import { Route } from '@/types/router/route';
-import { pagesMap } from '@/utils/router/pages';
+import { pagesMap } from '@/utils/router/routes';
 
 interface routeStore {
-  routes: Map<string, Pages> | undefined;
+  routes: Map<string, Route> | undefined;
-  currentRouter: Pages | undefined;
+  currentRouter: Route | undefined;
 }
 
 export const useRouterStore = defineStore({

src/types/pages.d.ts

@@ -1,15 +0,0 @@
-export interface Pages extends Record<string, any> {
-  path: string;
-  meta?: {
-    ignoreAuth?: boolean;
-  };
-  style: {
-    navigationBarTitleText: string;
-    [key: string]: string;
-  };
-}
-
-export interface SubPackages {
-  root: string;
-  pages: Pages[];
-}

src/types/router/route.d.ts

@@ -0,0 +1,28 @@
+export interface Route extends Record<string, any> {
+  path: string;
+  meta?: {
+    ignoreAuth?: boolean;
+  };
+  style: {
+    navigationBarTitleText: string;
+    [key: string]: string;
+  };
+}
+
+export interface SubPackages {
+  root: string;
+  pages: Route[];
+}
+
+export interface RouteLocationNormalized {
+  /* 当前页面栈的实例 */
+  currentPages: Page.PageInstance<AnyObject, {}>[];
+  /* 当前页面的实例 */
+  currentPage: Page.PageInstance;
+  /* 当前页面在pages.json中的配置 */
+  currentRoute?: Route;
+  /* 当前页面的path */
+  path?: string;
+  /* 当前页面的url参数 */
+  query: Record<string, string | string[]>;
+}

src/utils/router/navigates.ts

@@ -46,7 +46,7 @@ export class Navigates {
     this.navigate(url, options);
   }
   replaceAll(url: string, options?: NavigateOptions) {
-    this.type = NAVIGATE_TYPE.REDIRECT_TO;
+    this.type = NAVIGATE_TYPE.RE_LAUNCH;
     this.navigate(url, options);
   }
   pushTab(url: string, options?: NavigateOptions) {

src/utils/router/routes.ts

@@ -1,13 +1,13 @@
 import pagesJson from '@/pages.json';
-import { Pages } from '@/types/pages';
+import { Route } from '@/types/router/route';
 
 const { pages, subPackages } = pagesJson;
 
 // 将pages.json转换成Map对象,path为key
-const pagesMap = new Map<string, Pages>();
+const pagesMap = new Map<string, Route>();
 
 pages.forEach((page) => {
-  pagesMap.set(page.path, page as Pages);
+  pagesMap.set(page.path, page as Route);
 });
 
 if (Array.isArray(subPackages) && subPackages.length) {
@@ -15,7 +15,7 @@ if (Array.isArray(subPackages) && subPackages.length) {
     const rootPath = el.root;
     el.pages.forEach((page) => {
       page.path = rootPath + '/' + page.path;
-      pagesMap.set(page.path, page as Pages);
+      pagesMap.set(page.path, page as Route);
     });
   });
 }