qiankun可以使用hash模式吗

qiankun 是一个基于single-spa的微前端解决方案，用于将多个独立开发的前端应用集成到一个整体的应用中。在 qiankun 中，可以使用hash模式来进行路由的切换。

hash模式是指在URL的末尾会有一个带有#号的部分，例如www.example.com/#/home。它的优点是兼容性好，可以支持在所有浏览器中运行，而不需要服务器端的特殊配置。在 qiankun 中，通过配置路由的base字段为hash模式，可以启用hash路由。

首先，在主应用的主文件中，需要将路由模式设置为hash模式。具体方法是在实例化路由时，传入mode字段，并将其值设置为'hash'。这样，主应用在加载子应用时，就会使用hash模式。

其次，在子应用的配置文件中，也需要设置路由模式为hash模式。可以通过配置路由配置项的mode字段，并将其值设置为'hash'，以确保子应用在加载后使用的是hash模式。

使用hash模式的好处是，可以确保不同前端应用之间的路由切换不会相互干扰，每个应用都在自己的路由空间内进行操作，不会引起冲突。同时，也可以避免一些浏览器对于路由路径斜杠处理的问题，增强了应用的兼容性。

总之，qiankun是支持使用hash模式的，通过在主应用和子应用的路由配置中进行相应的设置，就可以使用hash模式来进行路由的切换。

相关问题

qiankun子应用使用hash路由在自己工程里面跳转

如果您的 qiankun 子应用使用 hash 路由模式，并且您想要在子应用自己的工程中进行页面跳转，可以通过以下方式实现：

1. 在子应用中引入 `history` 库，用于操作浏览器的历史记录和 URL。

import { createHashHistory } from 'history';

const history = createHashHistory();

2. 使用 `history.push` 方法进行页面跳转，例如：

history.push('/path/to/page');

这样就可以在子应用中进行 hash 路由的页面跳转了。需要注意的是，如果您的 qiankun 主应用也使用了 hash 路由模式，那么在子应用中进行页面跳转时，需要使用 `window.parent.location.hash` 来操作主应用的 URL，例如：

window.parent.location.hash = '/path/to/page';

这样就可以通过 hash 路由在 qiankun 子应用中进行页面跳转了。

vue的qiankun子应用为什么hash路由跳转不成功

在使用 Qiankun 开发子应用时，如果子应用使用的是 hash 模式路由，需要在子应用的入口文件中，手动初始化路由。

在 Vue 的子应用中，可以在 `main.js` 文件中进行路由初始化，具体实现如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

// 手动初始化路由
let instance = null

function render(props = {}) {
  const { container } = props

  instance = new Vue({
    router,
    render: h => h(App)
  }).$mount(container ? container.querySelector('#app') : '#app')
}

// 如果不是作为子应用使用，则直接渲染应用
if (!window.__POWERED_BY_QIANKUN__) {
  render()
}

// 导出生命周期钩子函数
export async function bootstrap() {}

export async function mount(props) {
  // 初始化路由
  render(props)
}

export async function unmount() {
  // 销毁实例
  instance.$destroy()
  instance = null
}

在这里，我们通过 `render` 函数手动初始化了路由，并在 `mount` 钩子中再次调用 `render` 函数，以保证子应用在挂载时能够正确初始化路由。

另外，需要注意的是，在切换子应用时，主应用会将当前的路由信息传递给子应用，因此，子应用需要在接收到这些信息后自行进行路由跳转。你可以通过监听 `qiankun` 的 `routeChange` 事件来实现这个功能，具体实现如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

// 手动初始化路由
let instance = null

function render(props = {}) {
  const { container } = props

  instance = new Vue({
    router,
    render: h => h(App)
  }).$mount(container ? container.querySelector('#app') : '#app')
}

// 如果不是作为子应用使用，则直接渲染应用
if (!window.__POWERED_BY_QIANKUN__) {
  render()
}

// 导出生命周期钩子函数
export async function bootstrap() {}

export async function mount(props) {
  // 初始化路由
  render(props)

  // 监听 routeChange 事件
  props.onGlobalStateChange((state, prev) => {
    if (state.type === 'vue2_subapp_route_change') {
      const { path } = state.payload
      router.push(path)
    }
  })
}

export async function unmount() {
  // 销毁实例
  instance.$destroy()
  instance = null
}

在这里，我们通过 `props.onGlobalStateChange` 监听 `routeChange` 事件，并在事件回调函数中跳转路由。当主应用切换路由时，会触发这个事件，从而实现路由跳转。