Wujie简介

无界的官网是这样解释的
在这里插入图片描述
具体的大家可以去官网看一下,官网上也有现成的例子,喜欢的也可以去看一下,这里只是记录一下我在项目中的使用。因为公司使用的技术框架是Vue,所以这里也是基于vue的使用。
我这里是新建的三个独立的vue项目

#项目主入口
main_view
#子项目1
sub_app_page1
#子项目2
sub_app_page2

安装

在主项目main_view 中安装 Wujie

# vue2 框架
npm i wujie-vue2 -S
# vue3 框架
npm i wujie-vue3 -S

引入

在 主项目main_view的main.js中引入

//根据自己的实际情况引入对应的版本
//vue2
import WujieVue from "wujie-vue2";
// vue3
//import WujieVue from "wujie-vue3";

Vue.use(WujieVue);

另外需要建立sub_app_page1sub_app_page2两个menu
在这里插入图片描述
接下来需要在主项目main_view 的router里面新建两个路由

  {
    path: "/sub_app_page1",
    name: "sub_app_page1",
    component: () =>import( "@/subEntry/index.vue"),
  },
  {
    path: "/sub_app_page2",
    name: "sub_app_page2",
    component: () =>import( "@/subEntry/index.vue"),
  },

看一下 @/subEntry/index.vue中的代码

<template>
  <WujieVue
    class="wujie-vue-sub"
    width="100%"
    height="100%"
    :name="$route.name"
    :url="url"
    :loadError="errorHandler"
  ></WujieVue>
</template>

<script>
import WujieVue from 'wujie-vue2';
export default {
  name: 'index',
   computed: {
    url() {
      return this.urlDict[this.$route.name];
    }
  },
  data() {
  	return{
	 urlDict: {
        sub_app_page1: 'http://localhost:8082',
        sub_app_page2: 'http://localhost:8083',
      },
	name: '', //项目唯一标识
	}
  }
  mounted() {}
};
</script>

<style lang="scss"></style>

主要配置nameurl ,其中name为 项目唯一标识,用户必须保证 ,url为需要渲染的地址,根据实际情况具体配置(具体配置参考这里
好啦,这样三个项目就可以正常访问了(到目前为止sub_app_page1和sub_app_page2不需要配置任何东西)
请添加图片描述
写到这里有同学就会发现不对了,就是当我切换子系统的路由的时候,导航栏上面的地址并没有变化,这是有问题的,我们希望跟vue一样上面的地址随着路由的地址变化而变化
请添加图片描述
官网有提供解决方法,但是这个这个方法好像有bug,所以我们采用另一种解决方式使用bus去动态更新主项目的地址

//主项目中使用$on发出事件
 WujieVue.bus.$on('sub-route-change', (name, path) => {
 //这里动态更改导航栏上面的地址,name为项目标识,path为子项目当前路由地址
})
//子项目,监听路由变化,动态出发主项目的方法
  watch: {
    $route: {
      deep: true,
      handler() {
        window.$wujie.bus.$emit(
          'sub-route-change',
          'sub_app_page1',
          this.$route.path
        );
      }
    }
  },

请添加图片描述

官网有详细的例子,有兴趣可以下载看看

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐