首页 > 其他分享> 文章详细

乾坤(qiankun)结合vue入门

2022-09-06 21:01:33 阅读：260 来源： 互联网

标签：child1 vue 入门 router qiankun 应用 home import

前言

官方入门教程 :https://qiankun.umijs.org/zh/cookbook
微应用路由模式选择：location.pathname--hash
demo参考
常见问题
在主应用的某个路由页面加载微应用

注意事项

主应用和各个微应用之间挂载id（app）命名尽量保持不同，避免挂载被覆盖，同时也方便调试
微应用路由应该和主应用注册微应用的路由相同

主应用

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

//主应用 配置
import "./qiankunconfig"

Vue.config.productionTip = false


Vue.use(ElementUI);
new Vue({
    router,
    store,
    render: function (h) {
        return h(App)
    }
}).$mount('#app')

qiankunconfig

import { registerMicroApps } from 'qiankun';


//微应用配置
registerMicroApps([
    {
        //名称不能重复
        name: 'embedChild',
        entry: '//localhost:8080',
        //挂载在主应用的dom id
        container: '#father-child',
        //与微应用匹配的路由
        activeRule: '/home/child1',
    },
    {
        name: 'embedChild2',
        entry: '//localhost:8080',
        container: '#father-child',
        activeRule: '/home/child2',
    },
]);

//在主应用路由页mounted start
// start();

vue-router路由配

import Vue from 'vue'
import VueRouter from 'vue-router'
import home from '@/views/Index/home'


Vue.use(VueRouter)

const routes = [
    {path: '/', redirect: '/home'},
    {
        path: '/home/*',
        name: 'home',
        component: home,
        children:[
            {path: '/child2', name: 'child2'},
            {path: '/child1', name: 'child1'},
        ]
    },
    {
        path: '/home',
        name: 'home',
        component: home,
    },
    // {path: '/father', name: 'father', component: father},

]

const router = new VueRouter({
    mode:'history',
    routes
})

export default router

app.vue

直接挂router-view

<template>
  <div>
    <router-view/>
  </div>
</template>

home.vue

主应用聚合页面

<template>
  <el-container>
    <el-header>Header</el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
            default-active="2"
            class="el-menu-vertical-demo">
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title"><router-link to="/home/child1">子模块1</router-link></span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-document"></i>
            <span slot="title"><router-link to="/home/child2">子模块2</router-link></span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <div id="father-child">
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import {start} from 'qiankun';

export default {
  mounted() {
    //避免重复加载
    if (!window.qiankunStarted) {
      window.qiankunStarted = true;
      start();
    }
  },
  data() {
    return {}
  },
  created() {
  },
  methods: {},
}
</script>

<style lang='less' scoped>
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 700px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>

微应用

main.js

import Vue from 'vue'
import './public-path';

export {bootstrap, mount, unmount, update} from './qiankunconfig'
import {render} from './qiankunconfig'

Vue.config.productionTip = false

 // 独立运行时挂载dom
if (!window.__POWERED_BY_QIANKUN__) {
    render();
}

qiankunconfig

注意：微应用需要在自己的入口 js (通常就是你配置的 webpack 的 entry js) 导出 bootstrap、mount、unmount 三个生命周期钩子，以供主应用在适当的时机调用。

import Vue from 'vue';
import router from "@/router";
import App from "@/App";


let instance = null
export const render = () => {
    instance = new Vue({
        router,
        render: h => h(App)
    }).$mount('#child1Root');
}

/**
 * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
 * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
 */
export async function bootstrap() {
    console.log('child1-bootstrap');
}



/**
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 */
export async function mount(props) {
    console.log(`child1-mount-props:${JSON.stringify(props)}`);
    render(props)
}


/**
 * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
 */
export async function unmount(props) {
    console.log(`child1-unmount-props:${JSON.stringify(props)}`);
    instance.$destroy();
}



/**
 * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
 */
export async function update(props) {
    console.log(`child1-update-props:${JSON.stringify(props)}`);
}

router配置

import Vue from 'vue'
import VueRouter from 'vue-router'

import child1 from "@/components/childFirst";
import child2 from "@/components/childSeconde";

Vue.use(VueRouter)

const routes = [
    {path: '/', redirect: '/child1'},
    {
        path: '/child1',
        name: 'child1',
        component: child1
    },

    {
        path: '/child2',
        name: 'child2',
        component: child2
    },
]

const router = new VueRouter({
    mode: 'history',
    base: window.__POWERED_BY_QIANKUN__  ? '/home' : '/',
    routes
})

export default router

标签：child1,vue,入门,router,qiankun,应用,home,import
来源： https://www.cnblogs.com/cyh1282656849/p/16663275.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

乾坤(qiankun)结合vue入门

前言

注意事项

主应用

main.js

qiankunconfig

vue-router路由配

app.vue

home.vue

微应用

main.js

qiankunconfig

router配置