123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081 |
- <template>
- <micro-app
- :key="name"
- style="height:100%"
- :name="name"
- :url="url"
- :baseroute="baseRoute"
- :data="{ store, router, subPath: subFullPath}"
- @datachange="handleDataChange"
- />
- </template>
- <script >
- // 依赖 @micro-zoe/micro-app (京东开源)
- // https://zeroing.jd.com/micro-app/docs.html#/
- import { computed, watch, onUnmounted } from 'vue'
- import store from '../../store'
- import { useMain } from '@cip/hooks/use-main'
- import { useRouter, useRoute } from 'vue-router'
- import { debounce, isArray } from '@cip/utils/util'
- import { judgeHiddenFramework } from './util'
- export default {
- props: {
- name: String,
- url: String,
- baseRoute: String,
- subPath: String,
- withoutFramework: Array
- },
- setup (props) {
- const { setCurrentTitle, setFrameHide } = useMain()
- const router = useRouter()
- const route = useRoute()
- onUnmounted(() => {
- console.log('Main Unmounted')
- })
- const pathChange = function (path) {
- if (path !== route.fullPath) {
- router.push(path)
- }
- }
- const replacePath = function (path) {
- if (path !== route.fullPath) {
- router.replace(path)
- }
- }
- const handleDataChange = (e) => {
- const { type, data } = e.detail.data || {}
- if (type === 'setCurrentTitle') {
- setCurrentTitle(data)
- }
- if (type === 'pathChange') {
- const path = data.substring(1)
- pathChange(`${props.baseRoute}${path}`)
- }
- if (type === 'replacePath') {
- const path = data.substring(1)
- replacePath(`${props.baseRoute}${path}`)
- }
- }
- const subFullPath = computed(() => {
- return route.fullPath.replace(new RegExp(`^${props.baseRoute}`), '/')
- })
- watch(() => props.subPath, (val) => {
- if (isArray(props.withoutFramework)) {
- setFrameHide(judgeHiddenFramework(props.withoutFramework, props.subPath))
- } else {
- setFrameHide(false)
- }
- }, { immediate: true })
- return {
- store,
- router,
- handleDataChange,
- subFullPath
- }
- }
- }
- </script>
|