feat: 使用uni-mini-router路由管理

package.json

@@ -60,6 +60,7 @@
         "lodash-es": "^4.17.21",
         "pinia": "^2.0.35",
         "qs": "^6.11.1",
+        "uni-read-pages-vite": "^0.0.5",
         "vue": "^3.2.47"
     },
     "devDependencies": {
@@ -87,6 +88,7 @@
         "prettier": "^2.8.8",
         "sass": "^1.62.1",
         "typescript": "^5.0.4",
+        "uni-mini-router": "^0.0.7",
         "unocss": "^0.46.5",
         "unocss-preset-weapp": "^0.2.5",
         "vite": "^4.3.2",

src/App.vue

@@ -1,15 +1,8 @@
 <script setup lang="ts">
 import { onLaunch, onShow, onHide } from '@dcloudio/uni-app';
 import { useAuthStore } from '@/state/modules/auth';
-import { removeInterceptor, setupInterceptors } from '@/utils/interceptors';
-import { useRouterStore } from '@/state/modules/router';
 onLaunch(() => {
     console.log('App Launch');
-    removeInterceptor();
-
-    setupInterceptors();
-    const appStore = useRouterStore();
-    appStore.initialize();
 });
 onShow(() => {
     const authStore = useAuthStore();

src/components/Navbar/index.vue

@@ -6,7 +6,7 @@
 import { useSystem } from '@/hooks/useSystem';
 import { px2rpx } from '@/utils/uniapi';
 import { computed, ref } from 'vue';
-import { useRoute, useRouter } from '@/hooks/router';
+import { useRoute, useRouter } from 'uni-mini-router';
 import { useGlobalStyle } from '@/hooks/useGlobalStyle';
 import Iconify from '@/components/Iconify/index.vue';
 import { HOME_PAGE } from '@/enums/routerEnum';

src/hooks/router.ts

@@ -1,44 +0,0 @@
-import { Navigates } from '@/utils/router/navigates';
-import { useRouterStore } from '@/state/modules/router';
-import { RouteLocationNormalized } from '@/types/router/route';
-
-const router = new Navigates();
-
-/**
- * 路由hook
- */
-export function useRouter() {
-    return router;
-}
-
-/**
- * 获取当前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/main.ts

@@ -1,11 +1,15 @@
 import { createSSRApp } from 'vue';
 import App from './App.vue';
-import { setupStore } from '@/state';
 import 'uno.css';
+import { setupStore } from '@/state';
+import { setupRouter } from '@/router';
 
 export function createApp() {
     const app = createSSRApp(App);
 
+    // Configure router
+    setupRouter(app);
+
     // Configure store
     setupStore(app);
 

src/pages.json

@@ -1,24 +1,22 @@
 {
     "pages": [
         {
+            "name": "Home",
             "path": "pages/index/index",
             "style": {
                 "navigationBarTitleText": "Home"
             },
-            "meta": {
-                "ignoreAuth": true
-            }
+            "meta": {}
         },
         {
+            "name": "Demo",
             "path": "pages/demo/index",
             "style": {
                 "navigationBarTitleText": "Demo"
-            },
-            "meta": {
-                "ignoreAuth": true
             }
         },
         {
+            "name": "About",
             "path": "pages/about/index",
             "style": {
                 "navigationBarTitleText": "关于"
@@ -28,6 +26,7 @@
             }
         },
         {
+            "name": "Login",
             "path": "pages/login/index",
             "style": {
                 "navigationBarTitleText": "登录"
@@ -37,12 +36,14 @@
             }
         },
         {
+            "name": "Log",
             "path": "pages/log/index",
             "style": {
                 "navigationBarTitleText": "日志"
             }
         },
         {
+            "name": "NotFound",
             "path": "pages/notFound/404",
             "style": {
                 "navigationBarTitleText": "Not Found"

src/pages/about/index.vue

@@ -4,7 +4,7 @@ import { onShow } from '@dcloudio/uni-app';
 import BasicButton from '@/components/BasicButton/index.vue';
 import AppProvider from '@/components/AppProvider/inedx.vue';
 import { useAuthStore } from '@/state/modules/auth';
-import { useRouter } from '@/hooks/router';
+import { useRouter } from 'uni-mini-router';
 
 const authStore = useAuthStore();
 const isLogin = ref(false);

src/pages/demo/index.vue

@@ -1,11 +1,12 @@
 <script lang="ts" setup>
 import BasicButton from '@/components/BasicButton/index.vue';
 import AppProvider from '@/components/AppProvider/inedx.vue';
-import { useRouter } from '@/hooks/router';
+import { useRouter } from 'uni-mini-router';
 
 const router = useRouter();
 const jumpList1 = () => {
-    router.push('/pagesA/list/test1/index?key=words&page=1&limit=15');
+    // router.push('/pagesA/list/test1/index11?key=words&page=1&limit=15');
+    router.push({ path: '/pagesA/list/test1/index', query: { key: 'word', page: '1', limit: '15' } });
 };
 </script>
 

src/pages/index/index.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import BasicButton from '@/components/BasicButton/index.vue';
 import AppProvider from '@/components/AppProvider/inedx.vue';
-import { useRouter } from '@/hooks/router';
+import { useRouter } from 'uni-mini-router';
 import { CURRENT_PLATFORM, PLATFORMS } from '@/enums/platformEnum';
 import { judgePlatform } from '@/utils/platform';
 import Iconify from '@/components/Iconify/index.vue';
@@ -18,8 +18,7 @@ const isVue3 = judgePlatform(PLATFORMS.VUE3);
 
 const router = useRouter();
 const handleGetStarted = () => {
-    router.pushTab('/pages/demo/index');
-    // router.push('/pages/log/index?id=4345&title=log');
+    router.pushTab({ path: '/pages/demo/index' });
 };
 </script>
 <template>

src/pages/login/index.vue

@@ -3,7 +3,7 @@ import { reactive, ref } from 'vue';
 import { onLoad } from '@dcloudio/uni-app';
 import { useAuthStore } from '@/state/modules/auth';
 import { Toast } from '@/utils/uniapi/prompt';
-import { useRouter } from '@/hooks/router';
+import { useRouter } from 'uni-mini-router';
 import { useRequest } from 'alova';
 import { login } from '@/services/api/auth';
 
@@ -25,11 +25,11 @@ const submit = (e: any) => {
         Toast('登录成功', { duration: 1500 });
         authStore.setToken(res.token);
         setTimeout(() => {
-            if (redirect.value) {
-                router.go(redirect.value!, { replace: true });
-                return;
-            }
-            router.pushTab('/pages/about/index');
+            // if (redirect.value) {
+            //     router.push(redirect.value!, { replace: true });
+            //     return;
+            // }
+            router.replaceAll({ name: 'Home' });
         }, 1500);
     });
 };

src/pages/notFound/404.vue

@@ -2,14 +2,14 @@
 import { onLoad } from '@dcloudio/uni-app';
 import { ref } from 'vue';
 import BasicButton from '@/components/BasicButton/index.vue';
-import { useRouter } from '@/hooks/router';
+import { useRouter } from 'uni-mini-router';
 
 const go = ref<string>('');
 const router = useRouter();
 const redirect = ref<string>('');
 onLoad((query) => {
-    go.value = query.go || '';
-    redirect.value = query.redirect || '';
+    go.value = query?.go || '';
+    redirect.value = query?.redirect || '';
 });
 
 /**

src/pagesA/list/test1/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import BasicButton from '@/components/BasicButton/index.vue';
-import { useRouter } from '@/hooks/router';
+import { useRouter } from 'uni-mini-router';
 
 const router = useRouter();
 const jumpTest2 = () => {

src/pagesA/list/test2/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import BasicButton from '@/components/BasicButton/index.vue';
-import { useRouter } from '@/hooks/router';
+import { useRouter } from 'uni-mini-router';
 
 const router = useRouter();
 const jumpDetail = () => {

src/router/guard.ts

@@ -0,0 +1,39 @@
+import { useAuthStore } from '@/state/modules/auth';
+import { Router } from 'uni-mini-router/lib/interfaces';
+
+export function createRouterGuard(router: Router) {
+    createBeforeEachGuard(router);
+    createAfterEachGuard(router);
+}
+
+function createBeforeEachGuard(router: Router) {
+    router.beforeEach((to, _, next) => {
+        const authStore = useAuthStore();
+        // @ts-ignore
+        if (to && to?.meta?.ignoreAuth) {
+            // 如果目标路由忽略验证直接跳转
+            next();
+        } else if (!authStore.isLogin && to && to.name !== 'Login') {
+            // 如果没有登录且目标路由不是登录页面则跳转到登录页面
+            next({ name: 'Login' });
+        } else if (authStore.isLogin && to && to.name === 'Login') {
+            // 如果已经登录且目标页面是登录页面则跳转至首页
+            next({ name: 'Home' });
+        } else {
+            next();
+        }
+    });
+}
+
+function createAfterEachGuard(router: Router) {
+    router.afterEach((to) => {
+        const authStore = useAuthStore();
+        if (!authStore.isLogin && to && to.name !== 'Login') {
+            // 如果没有登录且目标路由不是登录页面则跳转到登录页面
+            router.replaceAll({ name: 'Login' });
+        } else if (authStore.isLogin && to && to.name === 'Login') {
+            // 如果已经登录且目标页面是登录页面则跳转至首页
+            router.replaceAll({ name: 'Home' });
+        }
+    });
+}

src/router/index.ts

@@ -0,0 +1,19 @@
+/**
+ * router
+ * @see https://gitee.com/fant-mini/uni-mini-router
+ */
+import { createRouter } from 'uni-mini-router';
+import { App } from 'vue';
+import { createRouterGuard } from '@/router/guard';
+
+const router = createRouter({
+    routes: [...ROUTES], // 路由表信息
+});
+
+export function setupRouter(app: App<Element>) {
+    // Configure router guard
+    createRouterGuard(router);
+    app.use(router);
+}
+
+export { router };

src/state/modules/router.ts

@@ -1,35 +0,0 @@
-import { defineStore } from 'pinia';
-import { Route } from '@/types/router/route';
-import { pagesMap } from '@/utils/router/routes';
-
-interface routeStore {
-    routes: Map<string, Route> | undefined;
-    currentRouter: Route | undefined;
-}
-
-export const useRouterStore = defineStore({
-    id: 'routerStore',
-    state: (): routeStore => ({
-        routes: undefined,
-        currentRouter: undefined,
-    }),
-    getters: {
-        getRoutes(state) {
-            return state.routes;
-        },
-        getCurrentRoute(state) {
-            return state.currentRouter;
-        },
-    },
-    actions: {
-        initialize() {
-            this.setRoutes();
-        },
-        setRoutes() {
-            this.routes = pagesMap;
-        },
-        setCurrentRoute(path: string) {
-            this.currentRouter = this.routes?.get(path) || undefined;
-        },
-    },
-});

src/types.d.ts

@@ -0,0 +1,2 @@
+//type.d.ts
+declare const ROUTES: [];

src/types/router/route.d.ts

@@ -1,32 +0,0 @@
-// 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 | boolean;
-    };
-}
-
-export interface SubPackages {
-    root: string;
-    pages: Route[];
-}
-
-export interface RouteLocationNormalized {
-    /* 当前页面栈的实例 */
-    currentPages: Page.PageInstance<AnyObject, {}>[];
-    /* 当前页面的实例 */
-    currentPage: Page.PageInstance | undefined;
-    /* 当前页面在pages.json中的配置 */
-    currentRoute?: Route;
-    /* 当前页面的path */
-    path?: string;
-    /* 当前页面的url参数 */
-    query: Record<string, string | string[]>;
-}

src/utils/router/constant.ts

@@ -1,38 +0,0 @@
-import { LOGIN_PAGE } from '@/enums/routerEnum';
-import { useRouterStore } from '@/state/modules/router';
-import { useRouter } from '@/hooks/router';
-
-/**
- * 是否忽略验证
- * @param path
- * @return boolean
- */
-export function isIgnoreAuth(path: string): boolean {
-    const _path = filterPath(path);
-    const routerStore = useRouterStore();
-    const routes = routerStore.getRoutes;
-    if (!routes) return false;
-    const route = routes.get(_path);
-    return route === undefined ? true : !!route?.meta?.ignoreAuth;
-}
-
-/**
- * 跳转登录
- * @param path
- */
-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/interceptor.ts

@@ -1,75 +0,0 @@
-import { HOME_PAGE, NAVIGATE_TYPE_LIST, NOT_FOUND_PAGE } from '@/enums/routerEnum';
-import { useAuthStore } from '@/state/modules/auth';
-import { isIgnoreAuth, jumpLogin } from '@/utils/router/constant';
-
-/**
- * 路由跳转前拦截
- * @param path
- * @return boolean
- */
-
-export function routerBeforeEach(path: string): boolean {
-    const isIgnore = isIgnoreAuth(path);
-    if (isIgnore) return true;
-    const authStore = useAuthStore();
-    if (authStore.isLogin) return true;
-    jumpLogin(path);
-    return false;
-}
-
-/**
- * 添加拦截器
- * 微信小程序端uni.switchTab拦截无效, 已在api中拦截
- * 微信小程序原生tabbar请使用onShow
- * 微信小程序端 <navigator>拦截无效,请使用api
- * @param routerName
- * @export void
- */
-function addInterceptor(routerName: string) {
-    uni.addInterceptor(routerName, {
-        // 跳转前拦截
-        invoke: (args) => {
-            const flag = routerBeforeEach(args.url);
-            return flag ? args : false;
-        },
-        // 成功回调拦截
-        success: () => {},
-        // 失败回调拦截
-        fail: (err: any) => {
-            let reg: RegExp;
-            /* #ifdef MP-WEIXIN */
-            reg = /(.*)?(fail page ")(.*)(" is not found$)/;
-            /* #endif */
-            /* #ifndef MP-WEIXIN */
-            reg = /(.*)?(fail page `)(.*)(` is not found$)/;
-            /* #endif */
-            if (reg.test(err.errMsg)) {
-                const go = err.errMsg.replace(reg, '$3') || '';
-                uni.navigateTo({
-                    url: `${NOT_FOUND_PAGE}?redirect=${HOME_PAGE}&go=${go}`,
-                });
-            }
-            return false;
-        },
-        // 完成回调拦截
-        complete: () => {},
-    });
-}
-
-/**
- * 添加路由拦截器
- */
-export function routerInterceptor() {
-    NAVIGATE_TYPE_LIST.forEach((item) => {
-        addInterceptor(item);
-    });
-}
-
-/**
- * 移除路由拦截器
- */
-export function routerRemoveInterceptor() {
-    NAVIGATE_TYPE_LIST.forEach((item) => {
-        uni.removeInterceptor(item);
-    });
-}

src/utils/router/navigates.ts

@@ -1,123 +0,0 @@
-import { warn } from 'vue';
-import { cloneDeep } from 'lodash-es';
-import { NAVIGATE_TYPE } from '@/enums/routerEnum';
-import { deepMerge } from '@/utils';
-import { routerBeforeEach } from '@/utils/router/interceptor';
-import { useRouterStore } from '@/state/modules/router';
-import { filterPath } from '@/utils/router/constant';
-
-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;
-        }
-    }
-
-    /**
-     * 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 */
-        if (!routerBeforeEach(url)) {
-            return;
-        }
-        /* #endif */
-        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,41 +0,0 @@
-import { assign } from 'lodash-es';
-import pagesJson from '@/pages.json';
-import { Route } from '@/types/router/route';
-
-const { pages, subPackages, tabBar } = pagesJson;
-
-// 将pages.json转换成Map对象,path为key
-const pagesMap = new Map<string, Route>();
-
-pages.forEach((page) => {
-    pagesMap.set(page.path, page as Route);
-});
-
-if (Array.isArray(subPackages) && subPackages.length) {
-    subPackages.forEach((el) => {
-        const rootPath = el.root;
-        el.pages.forEach((page) => {
-            page.path = `${rootPath}/${page.path}`;
-            pagesMap.set(page.path, page as Route);
-        });
-    });
-}
-
-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 };

vite.config.ts

@@ -3,6 +3,7 @@ import { ConfigEnv, loadEnv, UserConfig } from 'vite';
 import { resolve } from 'path';
 import uni from '@dcloudio/vite-plugin-uni';
 import Unocss from 'unocss/vite';
+import TransformPages from 'uni-read-pages-vite';
 
 export default ({ mode }: ConfigEnv): UserConfig => {
     const root = process.cwd();
@@ -19,6 +20,7 @@ export default ({ mode }: ConfigEnv): UserConfig => {
         // 自定义全局变量
         define: {
             'process.env': {},
+            ROUTES: (new TransformPages()).routes,
         },
         // 开发服务器配置
         server: {