suzuya-plugin-vue

Suzuya插件化微前端框架Vue底层实现

Dependency Injection

此插件向Suzuya Global Dependency Namespace(__suzuya_exposed_dependency__)注入了以下公共依赖文件:

| 原始名称 Original Name | 注入名称 | |--------------------|-----------| | vue | Vue | | vue-router | VueRouter |

API References

ctx.vue.vue

Vue实例,此属性有可能在未来版本中弃用

ctx.vue.router

VueRouter实例,此属性有可能在未来版本中弃用

ctx.vue.addRoute(record, parent?)

请务必使用这个方法添加路由,因为这个方法会处理好插件卸载,路由更新后的页面重新加载和context注入的逻辑

与VueRouter的参数相反,addRouter的第二个可选参数为parent

使用示例:

import ExampleComponent from './example.vue'
export const using = ['vue']
export function apply(ctx){
    ctx.vue.addRoute({path:'/example',component:ExampleComponent})
    ctx.vue.addRoute({path:'/xxxxx',component:ExampleComponent},'the_parent_route')
}

ctx.vue.removeRoute(name)

删除路由,这里也会处理路由更新后的页面重新加载的逻辑

Context Injection

插件已经自动处理好了Context注入到组件内的方法,你只需要引入即可

<script setup lang="ts">
import {inject} from "@vue/runtime-core";
import {FrontendContext} from "@suzuyajs/plugin-vue";

const ctx = inject<FrontendContext>('$context')
ctx.vue.xxxxxx
</script>