千帆竞渡，微前端领航：打造适应多样场景的路由策略

前端

2023-11-26 16:57:21

微前端架构下的路由策略

微前端架构是一种将前端应用拆分为多个独立的模块，并通过路由机制将这些模块组合成一个完整应用的架构模式。在微前端架构中，路由策略的选择对应用的性能和用户体验有着至关重要的影响。

hash模式与history模式

在前端开发中，通常有两种路由模式可以选择：hash模式和history模式。

hash模式： hash模式是利用URL的hash部分来实现路由功能。这种模式的优点在于简单易用，对服务器端没有特殊要求，兼容性好。缺点是URL不美观，也不利于SEO。
history模式： history模式是利用浏览器的历史记录API来实现路由功能。这种模式的优点在于URL美观，有利于SEO。缺点是需要服务器端支持，兼容性较差。

qiankun+vue2.0的微前端应用改造

接下来，我们将手把手带您改造一个qiankun+vue2.0的hash模式微前端应用，使其能够同时支持hash模式和history模式。

安装必要的依赖包

npm install history --save

修改vue.config.js

在vue.config.js文件中，添加以下配置：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/subapp/' : '/',
  devServer: {
    historyApiFallback: true
  }
}

修改qiankun.config.js

在qiankun.config.js文件中，添加以下配置：

export default {
  plugins: [
    ['@qiankun-plugin-hash', {}],
    ['@qiankun-plugin-history', {}]
  ]
}

修改子应用的入口文件

在子应用的入口文件中，添加以下代码：

import { createApp } from 'vue'
import App from './App.vue'
import { history } from 'history'
import { createRouter } from 'vue-router'

const routes = [
  {
    path: '/',
    component: App
  }
]

const router = createRouter({
  history,
  routes
})

const app = createApp(App)
app.use(router)
app.mount('#app')