style: 优化路由跳转

src/pages/about/index.vue

@@ -1,12 +1,13 @@
 <script lang="ts" setup>
   import BasicButton from '@/components/BasicButton/index.vue';
   import AppProvider from '@/components/AppProvider/inedx.vue';
-  import { router } from '@/utils/router';
   import { useAuthStore } from '@/state/modules/auth';
   import { ref } from 'vue';
   import { onShow } from '@dcloudio/uni-app';
+  import { useRouter } from '@/hooks/router';
   const authStore = useAuthStore();
   const isLogin = ref(false);
+  const router = useRouter();
   onShow(() => {
     isLogin.value = authStore.isLogin;
   });
@@ -32,7 +33,9 @@
         <view class="desc">{{ isLogin ? '测试' : '未登入' }}</view>
       </view>
       <view class="cell"
-        ><BasicButton @click="handleJump('/pages/log/index')">log</BasicButton></view
+        ><BasicButton @click="handleJump('/pages/log/index?id=4345&title=log')"
+          >log</BasicButton
+        ></view
       >
       <view class="cell" v-if="isLogin"
         ><BasicButton @click="handleLoginOut">登出</BasicButton></view

src/pages/log/index.vue

@@ -5,7 +5,7 @@
 <script lang="ts" setup>
   import { onLoad } from '@dcloudio/uni-app';
   onLoad((query) => {
-    console.log('log onLOad', query);
+    console.log('log onLoad', query);
   });
 </script>
 

src/pages/login/index.vue

@@ -3,12 +3,15 @@
   import { useAuthStore } from '@/state/modules/auth';
   import { onLoad } from '@dcloudio/uni-app';
   import { Toast } from '@/utils/uniapi/prompt';
-  import { router } from '@/utils/router';
+  import { useRouter } from '@/hooks/router';
   const redirect = ref<string | undefined>(undefined);
   onLoad((query) => {
-    redirect.value = query.redirect || undefined;
+    redirect.value = query.redirect ? decodeURIComponent(query.redirect) : undefined;
+    console.log('login redirect', redirect.value);
   });
 
+  const router = useRouter();
+
   const form = reactive({
     email: 'uni-app@test.com',
     password: 'Vue3_Ts_Vite',
@@ -18,6 +21,10 @@
     authStore.login(e.detail.value).then(() => {
       Toast('登录成功', { duration: 1500 });
       setTimeout(() => {
+        if (redirect.value) {
+          router.go(redirect.value, { replace: true });
+          return;
+        }
         router.pushTab('/pages/about/index');
       }, 1500);
     });

src/pages/notFound/404.vue

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
   import { onLoad } from '@dcloudio/uni-app';
   import { ref } from 'vue';
-  import { router } from '@/utils/router';
   import BasicButton from '@/components/BasicButton/index.vue';
+  import { useRouter } from '@/hooks/router';
 
   const go = ref<string>('');
+  const router = useRouter();
   const redirect = ref<string>('');
   onLoad((query) => {
     go.value = query.go || '';

src/types/router/route.d.ts

@@ -1,11 +1,15 @@
+import { types } from 'sass';
+import Boolean = types.Boolean;
+
 export interface Route extends Record<string, any> {
   path: string;
   meta?: {
     ignoreAuth?: boolean;
+    tabBar: boolean;
   };
   style: {
     navigationBarTitleText: string;
-    [key: string]: string;
+    [key: string]: string | boolean;
   };
 }
 

src/utils/router/constant.ts

@@ -1,6 +1,6 @@
-import { router } from '@/utils/router/index';
 import { LOGIN_PAGE } from '@/enums/routerEnum';
 import { useRouterStore } from '@/state/modules/router';
+import { useRouter } from '@/hooks/router';
 
 /**
  * 是否忽略验证
@@ -8,8 +8,7 @@ import { useRouterStore } from '@/state/modules/router';
  * @return boolean
  */
 export function isIgnoreAuth(path: string): boolean {
-  let _path = path.split('?')[0];
-  _path = _path.startsWith('/') ? _path.slice(1) : _path;
+  const _path = filterPath(path);
   const routerStore = useRouterStore();
   const routes = routerStore.getRoutes;
   if (!routes) return false;
@@ -24,5 +23,16 @@ export function isIgnoreAuth(path: string): boolean {
 export function jumpLogin(path: string) {
   const _path = path.startsWith('/') ? path : `/${path}`;
   const pathQuery = encodeURIComponent(_path);
+  const router = useRouter();
   router.push(`${LOGIN_PAGE}?redirect=${pathQuery}`);
 }
+
+/**
+ * 过滤url,获取path
+ * @param url
+ * @param prefix
+ */
+export function filterPath(url: string, prefix = '') {
+  const path = url.split('?')[0];
+  return prefix + (path.startsWith('/') ? path.substring(1) : path);
+}

src/utils/router/index.ts

@@ -1,9 +0,0 @@
-import { Navigates } from '@/utils/router/navigates';
-
-/**
- * 需要验证登录的路径
- * 包括分包(subPackage)的路径
- */
-export const AUTH_PAGE: string[] = ['pages/log/index'];
-
-export const router = new Navigates();

src/utils/router/navigates.ts

@@ -3,6 +3,8 @@ import { warn } from 'vue';
 import { deepMerge } from '@/utils';
 import { routerBeforeEach } from '@/utils/router/interceptor';
 import { cloneDeep } from 'lodash-es';
+import { useRouterStore } from '@/state/modules/router';
+import { filterPath } from '@/utils/router/constant';
 
 export type NavigateOptions = Partial<Omit<UniApp.NavigateToOptions, 'url'>> & { delta?: number };
 
@@ -37,18 +39,42 @@ export class Navigates {
         break;
     }
   }
+
+  /**
+   * uni.navigateTo
+   * @param url
+   * @param options
+   */
   push(url: string, options?: NavigateOptions) {
     this.type = NAVIGATE_TYPE.NAVIGATE_TO;
     this.navigate(url, options);
   }
+
+  /**
+   * uni.redirectTo
+   * @param url
+   * @param options
+   */
   replace(url: string, options?: NavigateOptions) {
     this.type = NAVIGATE_TYPE.REDIRECT_TO;
     this.navigate(url, options);
   }
+
+  /**
+   * uni.reLaunch
+   * @param url
+   * @param options
+   */
   replaceAll(url: string, options?: NavigateOptions) {
     this.type = NAVIGATE_TYPE.RE_LAUNCH;
     this.navigate(url, options);
   }
+
+  /**
+   * uni.switchTab
+   * @param url
+   * @param options
+   */
   pushTab(url: string, options?: NavigateOptions) {
     // 微信小程序端uni.switchTab拦截无效处理
     /* #ifdef MP-WEIXIN */
@@ -59,8 +85,34 @@ export class Navigates {
     this.type = NAVIGATE_TYPE.SWITCH_TAB;
     this.navigate(url, options);
   }
+
+  /**
+   * uni.navigateBack
+   * @param options
+   */
   back(options?: NavigateOptions) {
     this.type = NAVIGATE_TYPE.NAVIGATE_BACK;
     this.navigate('', options);
   }
+
+  /**
+   * 自动判断跳转页面 (navigateTo|switchTab)
+   * @param url
+   * @param options
+   */
+  go(url: string, options?: NavigateOptions & { replace?: boolean }) {
+    const path = filterPath(url);
+    const routerStore = useRouterStore();
+    const routes = routerStore.getRoutes;
+    const route = routes?.get(path);
+    if (route?.meta?.tabBar) {
+      this.pushTab(url, options);
+      return;
+    }
+    if (options?.replace) {
+      this.replace(url, options);
+      return;
+    }
+    this.push(url, options);
+  }
 }

src/utils/router/routes.ts

@@ -1,7 +1,8 @@
 import pagesJson from '@/pages.json';
 import { Route } from '@/types/router/route';
+import { assign } from 'lodash-es';
 
-const { pages, subPackages } = pagesJson;
+const { pages, subPackages, tabBar } = pagesJson;
 
 // 将pages.json转换成Map对象,path为key
 const pagesMap = new Map<string, Route>();
@@ -20,4 +21,21 @@ if (Array.isArray(subPackages) && subPackages.length) {
   });
 }
 
+if (tabBar) {
+  const tabBarList = tabBar.list;
+  if (Array.isArray(tabBarList)) {
+    tabBarList.forEach((el) => {
+      if (pagesMap.has(el.pagePath)) {
+        const page = pagesMap.get(el.pagePath);
+        const meta = page?.meta || {};
+        // @ts-ignore
+        meta.tabBar = true;
+        // @ts-ignore
+        page.meta = assign({}, meta);
+        pagesMap.set(el.pagePath, page as Route);
+      }
+    });
+  }
+}
+
 export { pagesMap };