@hb/router-hlper

说明

基于vue-router + vue3 实现的路由自管理工具，主要用于解决路由回退至目标路由问题 通过「对Vue Router的go、push、replace等方法的拦截」以及「路由守卫中对 首次进入页面、页面前进、页面回退 的拦截处理」来维护自管理路由栈

注意

非必要不使用window提供的history的原生方法进行路由跳转，若某些场景下无法避免对原生方法的使用，则必须手动调用工具提供的方法替代history的原生方法。传参皆与直接调用window提供的history的原生方法的传参一致

• 手动调用工具内replaceState方法替代window.history.replaceState
• 手动调用工具内pushState方法替代window.history.pushState
• 手动调用vue-router原生提供的go方法替代window.history.go

初始化配置

在main.js入口文件中进行初始化的工具的注册

1import router from './router';
2import RouterHelper from '@hb/router-hlper'
3
4RouterHelper.register(router);
5app.use(router);

RouterHelper提供的方法

方法名称	方法说明	参数	参数说明
register	初始化注册	router	router实例对象
backToTarget	回退至目标路由，若目标路由不存在，则清空路由并跳转至目标路由	target	RouteLocationRaw类型的路由对象
pushState	不能直接使用window.history.pushState操作路由，必须使用此方法来替代	该方法的入参与window.history.pushState的入参保持一致	-
replaceState	不能直接使用window.history.replaceState操作路由，必须使用此方法来替代	该方法的入参与window.history.replaceState的入参保持一致	RouteLocationRaw形式的路由对象

方法示例

register方法

1import router from './router';
2import RouterHelper from '@hb/router-hlper'
3
4RouterHelper.register(router);
5app.use(router);

backToTarget方法

1// RouteLocationNamedRaw方式
2RouterHelper.backToTarget({
3  name: 'home'
4})
5
6// RouteLocationPathRaw方式
7RouterHelper.backToTarget({
8  path: '/home'
9})
10
11// string方式
12RouterHelper.backToTarget('/home')

pushState方法

1RouterHelper.pushState({}, '', window.location.href);

replaceState方法

1 RouterHelper.replaceState({}, '', window.location.href);