@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入口文件中进行初始化的工具的注册

import router from './router';
import RouterHelper from '@hb/router-hlper'

RouterHelper.register(router);
app.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方法

import router from './router';
import RouterHelper from '@hb/router-hlper'

RouterHelper.register(router);
app.use(router);

backToTarget方法

// RouteLocationNamedRaw方式
RouterHelper.backToTarget({
  name: 'home'
})

// RouteLocationPathRaw方式
RouterHelper.backToTarget({
  path: '/home'
})

// string方式
RouterHelper.backToTarget('/home')

pushState方法

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

replaceState方法

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