Qiankun micro front-end routing mode

qiankun's use of history and hash routing mode under the vue framework

1. The main application is hash mode

• Description

  • When the main application is in hash mode, general micro-applications are also in hash mode. The primary application's first-level hash path will be assigned to the corresponding micro-application (for example #/base1). At this time, if the micro-application needs to perform a secondary path jump in hash mode (for example #/base1/child1) based on the base path , this scenario is in the current VueRouter In the implementation mode, you need to manually implement it yourself, just add a prefix to all routes. The base parameter in the hash mode of VueRouter does not support adding the hash path base .
  • When the main application is in the hash mode and the micro-application history mode, I tried it, and there were various bugs in the jump, which are not shown here.

• Shown below: main application hash mode + micro application history mode

• Main application configuration: hash mode

  • router/index.js (route configuration)

  // 一般hash模式下，不通过base:"/vue"这样添加前缀
  const router = new VueRouter({
        
        
    // mode: 'history', 
    mode: 'hash',
    base: process.env.BASE_URL,
    routes
  })
  

  • main.js configuration:
    • The main application qiankun activeRulearranged to activate the corresponding micro-app
    • Activating routing requires adding #/prefix
      

• Child Vue application configuration: hash mode

  • Need to add activation prefix/vue in each route
  • Note that this does not increase #/vuethe activation routing prefix, with the main application match

• Routing effect map

2. The main application is history mode

• Note: When the main application is in history mode and the micro application is also in hash mode, the performance is perfect. If the micro application needs to add the base path, just set the base attribute of the subproject .

• Code example: main application history mode + micro application hash mode

  • Main application configuration: history mode

  • main.js configuration: no prefix#/
    

  • router/index.js configuration
    

  • Micro application vue configuration: hash mode
    

  • Routing effect chart:
    

• Note: When the main application is in history mode and the micro application is in history mode, the performance is perfect. (Recommended when conditions permit)

• Code sample: Application is history mode + micro-app history mode

  • Main application configuration: history mode
    
  • router/index.js configuration
    

• Micro application vue configuration: history mode

  • Available in history mode base:'/vue' to add activation prefix
    

• Add activation prefix without using base, add it manually
  

• Routing effect map