feat-router

src/enums/routerEnum.ts

@@ -3,6 +3,7 @@ export enum NAVIGATE_TYPE {
   REDIRECT_TO = 'redirectTo',
   RE_LAUNCH = 'reLaunch',
   SWITCH_TAB = 'switchTab',
+  NAVIGATE_BACK = 'navigateBack',
 }
 
 export const NAVIGATE_TYPE_LIST = ['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'];

src/pages/index/index.vue

@@ -4,7 +4,6 @@
     <view class="text-area bg-rose-500 h-30rpx p-20rpx red">
       <text class="">{{ title }}</text>
     </view>
-    <view>{{ url }} ----</view>
     <Test />
     <view>
       <button @tap="jumLogin">登录</button>
@@ -21,20 +20,21 @@
 <script setup lang="ts">
   import { ref, reactive } from 'vue';
   import Test from '@/components/test/Test.vue';
+  import { router } from '@/utils/router';
   const title = ref('Hello');
   type Data = {
     token: string;
   };
 
   const jumLogin1 = () => {
-    uni.navigateTo({
+    router.push('/pages/login1/index', {
-      url: '/pages/login1/index',
+      success: (res) => {
+        console.log('success===>', res);
+      },
     });
   };
   const jumLogin = () => {
-    uni.navigateTo({
+    router.push('/pages/login/index');
-      url: '/pages/login/index',
-    });
   };
 </script>
 

src/utils/router/index.ts

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

src/utils/router/interceptor.ts

@@ -1,5 +1,5 @@
 import { HOME_PAGE, LOGIN_PAGE, NAVIGATE_TYPE_LIST, NOT_FOUND_PAGE } from '@/enums/routerEnum';
-import { authRouter } from '@/utils/router/index';
+import { AUTH_PAGE, router } from '@/utils/router/index';
 import { useAuthStore } from '@/state/modules/auth';
 import { Toast } from '@/utils/uniApi';
 
@@ -8,23 +8,25 @@ import { Toast } from '@/utils/uniApi';
  * @param path
  * @return boolean
  */
-function isIncludesAuthRouter(path: string): boolean {
+export function isIncludesAuthRouter(path: string): boolean {
-  if (!authRouter.length) return false;
+  if (!AUTH_PAGE.length) return false;
-  return authRouter.includes(path) || authRouter.some((item) => path.includes(item));
+  return AUTH_PAGE.includes(path) || AUTH_PAGE.some((item) => path.includes(item));
 }
 
-// 跳转登录
+/**
-function jumpLogin(path: string) {
+ * 跳转登录
+ * @param path
+ */
+export function jumpLogin(path: string) {
   const _path = path.startsWith('/') ? path : `/${path}`;
   let pathQuery = encodeURIComponent(_path);
-  uni.navigateTo({
+  router.push(`${LOGIN_PAGE}?redirect=${pathQuery}`);
-    url: `${LOGIN_PAGE}?redirect=${pathQuery}`,
-  });
 }
 
 /**
  * 添加拦截器
- * 微信小程序端uni.switchTab拦截无效,请在onShow处理
+ * 微信小程序端uni.switchTab拦截无效, 已在api中拦截
+ * 微信小程序原生tabbar请使用onShow
  * 微信小程序端 <navigator>拦截无效,请使用api
  * @param routerName
  * @export void

src/utils/router/navigates.ts

@@ -0,0 +1,73 @@
+import { LOGIN_PAGE, NAVIGATE_TYPE } from '@/enums/routerEnum';
+import { warn } from 'vue';
+import { deepMerge } from '@/utils';
+import { isIncludesAuthRouter } from '@/utils/router/interceptor';
+import { useAuthStore } from '@/state/modules/auth';
+import { cloneDeep } from 'lodash-es';
+
+export type NavigateOptions = Partial<Omit<UniApp.NavigateToOptions, 'url'>> & { delta?: number };
+
+export class Navigates {
+  private type: string;
+  private readonly options: NavigateOptions;
+  constructor(type?: string, options?: NavigateOptions) {
+    this.type = type || NAVIGATE_TYPE.NAVIGATE_TO;
+    this.options = options || {};
+  }
+  navigate(url: string, options?: NavigateOptions) {
+    const navigateOptions = deepMerge(cloneDeep(this.options), options);
+    const _options = deepMerge({ url }, navigateOptions);
+    switch (this.type) {
+      case NAVIGATE_TYPE.NAVIGATE_TO:
+        uni.navigateTo(_options);
+        break;
+      case NAVIGATE_TYPE.REDIRECT_TO:
+        uni.redirectTo(_options);
+        break;
+      case NAVIGATE_TYPE.RE_LAUNCH:
+        uni.reLaunch(_options);
+        break;
+      case NAVIGATE_TYPE.SWITCH_TAB:
+        uni.switchTab(_options);
+        break;
+      case NAVIGATE_TYPE.NAVIGATE_BACK:
+        uni.navigateBack(navigateOptions);
+        break;
+      default:
+        warn('navigate Error');
+        break;
+    }
+  }
+  push(url: string, options?: NavigateOptions) {
+    this.type = NAVIGATE_TYPE.NAVIGATE_TO;
+    this.navigate(url, options);
+  }
+  replace(url: string, options?: NavigateOptions) {
+    this.type = NAVIGATE_TYPE.REDIRECT_TO;
+    this.navigate(url, options);
+  }
+  replaceAll(url: string, options?: NavigateOptions) {
+    this.type = NAVIGATE_TYPE.REDIRECT_TO;
+    this.navigate(url, options);
+  }
+  pushTab(url: string, options?: NavigateOptions) {
+    // 微信小程序端uni.switchTab拦截无效处理
+    /* #ifdef MP-WEIXIN */
+    if (isIncludesAuthRouter(url)) {
+      const authStore = useAuthStore();
+      if (!authStore.isLogin) {
+        const _path = url.startsWith('/') ? url : `/${url}`;
+        let pathQuery = encodeURIComponent(_path);
+        this.push(`${LOGIN_PAGE}?redirect=${pathQuery}`);
+      }
+      return;
+    }
+    /* #endif */
+    this.type = NAVIGATE_TYPE.SWITCH_TAB;
+    this.navigate(url, options);
+  }
+  back(options?: NavigateOptions) {
+    this.type = NAVIGATE_TYPE.NAVIGATE_BACK;
+    this.navigate('', options);
+  }
+}

src/utils/router/router.d.ts

@@ -1,10 +0,0 @@
-declare interface Router extends Record<string, any> {
-  path: string;
-  meta?: {
-    auth?: boolean;
-  };
-}
-
-declare interface TabBar extends Record<string, any> {
-  list: Router[];
-}