Browse Source

feat: 路由历史模式从env读取并支持base参数

xiaoxian521 3 years ago
parent
commit
b8c8251c64
5 changed files with 42 additions and 8 deletions
  1. 5 0
      .env.development
  2. 3 0
      .env.production
  3. 4 8
      src/router/index.ts
  4. 29 0
      src/router/utils.ts
  5. 1 0
      types/global.d.ts

+ 5 - 0
.env.development

@@ -7,6 +7,11 @@ VITE_PUBLIC_PATH = /
 # 开发环境代理
 VITE_PROXY_DOMAIN = /api
 
+# 开发环境路由历史模式
+VITE_ROUTER_HISTORY = "hash"
+
 # 开发环境后端地址
 VITE_PROXY_DOMAIN_REAL = "http://127.0.0.1:3000"
 
+
+

+ 3 - 0
.env.production

@@ -1,5 +1,8 @@
 # 线上环境项目打包路径
 VITE_PUBLIC_PATH = /
 
+# 线上环境路由历史模式
+VITE_ROUTER_HISTORY = "hash"
+
 # 线上环境后端地址
 VITE_PROXY_DOMAIN_REAL = ""

+ 4 - 8
src/router/index.ts

@@ -1,10 +1,4 @@
-import {
-  Router,
-  RouteMeta,
-  createRouter,
-  RouteRecordName,
-  createWebHashHistory
-} from "vue-router";
+import { Router, RouteMeta, createRouter, RouteRecordName } from "vue-router";
 import { toRouteType } from "./types";
 import { openLink } from "/@/utils/link";
 import NProgress from "/@/utils/progress";
@@ -17,6 +11,7 @@ import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 import {
   initRouter,
+  getHistoryMode,
   getParentPaths,
   findRouteByPath,
   handleAliveRoute
@@ -24,8 +19,9 @@ import {
 
 // 创建路由实例
 export const router: Router = createRouter({
-  history: createWebHashHistory(),
+  history: getHistoryMode(),
   routes: constantRoutes.concat(...remainingRouter),
+  strict: true,
   scrollBehavior(to, from, savedPosition) {
     return new Promise(resolve => {
       if (savedPosition) {

+ 29 - 0
src/router/utils.ts

@@ -1,9 +1,13 @@
 import {
+  RouterHistory,
   RouteRecordRaw,
   RouteComponent,
+  createWebHistory,
+  createWebHashHistory,
   RouteRecordNormalized
 } from "vue-router";
 import { router } from "./index";
+import { loadEnv } from "../../build";
 import Layout from "/@/layout/index.vue";
 import { useTimeoutFn } from "@vueuse/core";
 import { RouteConfigs } from "/@/layout/types";
@@ -221,11 +225,36 @@ const addAsyncRoutes = (arrRoutes: Array<RouteRecordRaw>) => {
   return arrRoutes;
 };
 
+// 获取路由历史模式 https://next.router.vuejs.org/zh/guide/essentials/history-mode.html
+const getHistoryMode = (): RouterHistory => {
+  const routerHistory = loadEnv().VITE_ROUTER_HISTORY;
+  // len为1 代表只有历史模式 为2 代表历史模式中存在参数base https://next.router.vuejs.org/zh/api/#%E5%8F%82%E6%95%B0-1
+  const historyMode = routerHistory.split(",");
+  const leftMode = historyMode[0];
+  const rightMode = historyMode[1];
+  // no param
+  if (historyMode.length === 1) {
+    if (leftMode === "hash") {
+      return createWebHashHistory("");
+    } else if (leftMode === "h5") {
+      return createWebHistory("");
+    }
+  } //has param
+  else if (historyMode.length === 2) {
+    if (leftMode === "hash") {
+      return createWebHashHistory(rightMode);
+    } else if (leftMode === "h5") {
+      return createWebHistory(rightMode);
+    }
+  }
+};
+
 export {
   ascending,
   filterTree,
   initRouter,
   resetRouter,
+  getHistoryMode,
   addAsyncRoutes,
   delAliveRoutes,
   getParentPaths,

+ 1 - 0
types/global.d.ts

@@ -68,6 +68,7 @@ declare global {
     VITE_PUBLIC_PATH: string;
     VITE_PROXY_DOMAIN: string;
     VITE_PROXY_DOMAIN_REAL: string;
+    VITE_ROUTER_HISTORY: string;
   }
 
   declare interface ServerConfigs {