qiankun乾坤框架子服务之间的跳转出现undefined路由

1. 各服务的路由使用的都是hash模式

2. 每一个子服务都有各自的pathname

3. 路由的跳转使用的都是$router.push

4. 多点几次浏览器的回退按钮

经过上面的一系列操作后在主服务的路由前置守卫中获取到的to.path值竟然为undefined。

网上查了一波,也不知道是为啥,看到篇文章说不要使用$router.push跳转路由,可以使用window.history.pushState,测试了下确实可以,然后就写了个方法去替换了路由的push函数

import qs from 'querystring'
const baseName = '/store/#' //各子服务的pathname+'#'

export function $_routerPush(routerLocation: any, qianKunTag: boolean, router: any) {
  if (qianKunTag) {
    let gotoPath = baseName
    if (Object.prototype.toString.call(routerLocation) === '[object String]') {
      gotoPath += routerLocation
    } else {
      const { path, query } = routerLocation
      gotoPath += path
      query && (gotoPath += `?${qs.stringify(query)}`)
    }
    window.history.pushState({}, '', gotoPath)
  } else {
    if (Object.prototype.toString.call(routerLocation) === '[object String]') {
      router && router.push(routerLocation)
    } else {
      const { name, path, query, params } = routerLocation
      router && router.push({ name, path, query, params })
    }
  }
}

export function $_routerReplace(routerLocation: any, qianKunTag: boolean, router: any) {
  if (qianKunTag) {
    let gotoPath = baseName
    if (Object.prototype.toString.call(routerLocation) === '[object String]') {
      gotoPath += routerLocation
    } else {
      const { path, query } = routerLocation
      gotoPath += path
      query && (gotoPath += `?${qs.stringify(query)}`)
    }
    window.history.replaceState({}, '', gotoPath)
  } else {
    if (Object.prototype.toString.call(routerLocation) === '[object String]') {
      router && router.replace(routerLocation)
    } else {
      const { name, path, query, params } = routerLocation
      router && router.replace({ name, path, query, params })
    }
  }
}

然后将这两个函数挂到vue实例上

import { $_routerPush, $_routerReplace } from './child-config'
let app: ReturnType<typeof createApp>
function render(qiankuntag: boolean, props: any = {}) {
  const { container } = props
  app = createApp(App)
  app.use(component)
  initElement(app)
  app
    .use(router)
    .use(store, key)
    .mount(container ? container.querySelector('#app') : '#app')
  app.config.globalProperties.$_routerPush = (path: any) => {
    $_routerPush(path, qiankuntag, router)
  }
  app.config.globalProperties.$_routerReplace = (path: any) => {
    $_routerReplace(path, qiankuntag, router)
  }
}

当然这里是用的vue3的实例挂载,vue2就是挂在Vue实例的原型上就行

Vue.prototype.$_routerPush = (path) => {
  $_routerPush(path, qiankuntag, router)
}
Vue.prototype.$_routerReplace = (path) => {
  $_routerReplace(path, qiankuntag, router)
}

每个子服务都需使用以上函数,最后就是将$router.push全局替换成$_routerPush即可。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

生活的打工仔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值