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

移除hashchange监听方式,改为在App启动时直接处理初始路由
This commit is contained in:
feige996
2025-08-07 18:22:57 +08:00
parent a3cbd65f0a
commit 57ef29f4cc
2 changed files with 17 additions and 15 deletions

View File

@@ -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')

View File

@@ -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
},
}