Procházet zdrojové kódy

fix(H5路由): 修复H5环境下直接输入路由无法拦截的问题

移除hashchange监听方式,改为在App启动时直接处理初始路由
feige996 před 9 měsíci
rodič
revize
57ef29f4cc
2 změnil soubory, kde provedl 17 přidání a 15 odebrání
  1. 7 5
      src/App.vue
  2. 10 10
      src/router/interceptor.ts

+ 7 - 5
src/App.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { onHide, onLaunch, onShow } from '@dcloudio/uni-app'
-import { usePageAuth } from '@/hooks/usePageAuth'
+import { navigateToInterceptor } from '@/router/interceptor'
 import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only'
 
-usePageAuth()
-
-onLaunch(() => {
-  console.log('App Launch')
+onLaunch((options) => {
+  // #ifdef H5
+  // 处理H5环境用户直接输入页面路由的情况:https://github.com/unibest-tech/unibest/issues/192
+  console.log('App Launch', options?.path)
+  navigateToInterceptor.invoke({ url: options?.path ?? '/' })
+  // #endif
 })
 onShow(() => {
   console.log('App Show')

+ 10 - 10
src/router/interceptor.ts

@@ -19,7 +19,7 @@ function isLogined() {
 const isDev = import.meta.env.DEV
 
 // 黑名单登录拦截器 - (适用于大部分页面不需要登录,少部分页面需要登录)
-const navigateToInterceptor = {
+export const navigateToInterceptor = {
   // 注意,这里的url是 '/' 开头的,如 '/pages/index/index',跟 'pages.json' 里面的 path 不同
   // 增加对相对路径的处理,BY 网友 @ideal
   invoke({ url }: { url: string }) {
@@ -64,14 +64,14 @@ export const routeInterceptor = {
     uni.addInterceptor('redirectTo', navigateToInterceptor)
     uni.addInterceptor('switchTab', navigateToInterceptor)
 
-    // #ifdef H5
-    // 一个粗糙的实现方式,不满意可以自行修改:https://github.com/unibest-tech/unibest/issues/192
-    // H5环境路由拦截,监听hashchange事件
-    window.addEventListener('hashchange', () => {
-      // 获取当前路径
-      const currentPath = `/${window.location.hash.split('#/')[1]?.split('?')[0]}`
-      navigateToInterceptor.invoke({ url: currentPath })
-    })
-    // #endif
+    // // #ifdef H5
+    // // 一个粗糙的实现方式,不满意可以自行修改:https://github.com/unibest-tech/unibest/issues/192
+    // // H5环境路由拦截,监听hashchange事件
+    // window.addEventListener('hashchange', () => {
+    //   // 获取当前路径
+    //   const currentPath = `/${window.location.hash.split('#/')[1]?.split('?')[0]}`
+    //   navigateToInterceptor.invoke({ url: currentPath })
+    // })
+    // // #endif
   },
 }