如:
{"path": "pages/home/home","aliasPath": "/home"
}
http://localhost:8080/#/home 显示正常页面
http://localhost:8080/#/pages/home/home 显示空白页面
uni.navigateTo({url: `/pages/home/home`
})
以上代码跳转页面,在H5上,会跳转到 http://localhost:8080/#/pages/home/home 这个路径下,显示空白页面。
处理方式两种:
a.简单粗暴
全部的全路径修改为别名
(优化项:用作者提供的this.$Router.push方式跳转页、页面)
b.曲线救国(暂未找到其他“懒”方法,欢迎评论告知)
router.js文件 -> 全局路由前置守卫router.beforeEach方法中重定向
核心代码:
// #ifndef H5// 非H5正常跳转即可next()// #endif// #ifdef H5// H5需要修改path为别名const preFromAliasPath = getApp().globalData.preFromAliasPathif (preFromAliasPath === from.aliasPath) { // 防止无限循环next()} else {getApp().globalData.preFromAliasPath = from.aliasPathto.path = to.aliasPathnext(to)}// #endif
优点:不需要修改已有的跳转逻辑中的全路径
缺点:next(to) 会多执行一次router.beforeEach方法(打印log知道,但是页面切换无明显感知)
// 修改前
uni.navigateTo({path: 'pages/detail/detail',success: res => {res.eventChannel.emit('acceptData', {data: detailInfo})}
})
// 修改后
this.$Router.push({path: '/detail',events: { acceptDataFromOpenedPage: data => {} },success: res => {res.eventChannel.emit('acceptData', {data: detailInfo})}
})