（三）子应用含有路由

如果子应用中含有 vue 路由会怎么样呢，可以看一下

子路由定义：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/Home/index.vue'
import About from '@/About/index.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [{
    path: '/home',
    component: Home
  }, {
    path: '/about',
    component: About
  }]
})

 

点击子应用的Home、About 可以发现把父应用的路由也给改了

所以需要给子路由一个 base

export default new Router({
  mode: 'history',
  base: '/child',
  routes: [{
    path: '/home',
    component: Home
  }, {
    path: '/about',
    component: About
  }]
})

 父应用需要进行匹配

location => { // 当什么时候触发该子应用 一个触发的函数
    return location.pathname.startsWith('/child')
  },

ok 了~

但是目前子应用是不能够单独跑起来的，因为没有了 new Vue，所以需要判断一下他是独立运行的还是依靠父应用运行

import Vue from 'vue'
import App from './App'
import router from './router'
// 引入 single-spa-vue
import singleSpaVue from 'single-spa-vue'
Vue.config.productionTip = false

const appOptions = {
  el: '#child', // 挂载到哪个父应用的标签上 不是app了
  router,
  render: h => h(App)
}

// 判断是否是独立运行
if (!window.singleSpaNavigate) { // 是
  delete appOptions.el
  new Vue(appOptions).$mount('#app')
}

const vueLifeCycle = singleSpaVue({
  Vue,
  appOptions
})

export const bootstrap = vueLifeCycle.bootstrap
export const mount = vueLifeCycle.mount
export const unmount = vueLifeCycle.unmount
export const update = vueLifeCycle.update

总结：

1. single-spa 不够灵活，不能够动态加载 js 文件，需要手动封装 loadScript 方法，手动加载

2. 样式不隔离，全局对象不隔离，切换不同的子应用，用的都是同一个window

没有 跨域问题 用的 script 标签