router-helper_yh v2.1.0

@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方法

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);