动态导入资源

import Vue2 from 'vue2/dist/vue.runtime.min.js' // vue2运行时
import * as vue2Component from 'xxx/navigation-components' // vue2公共组件

在 vue3 文件中创建 Vue 2 实例

<script setup>
import { onMounted } from 'vue';
import Vue2 from 'vue2/dist/vue.runtime.min.js'
import vue2Component from 'xxx/navigation-components'

onMounted(async () => {
   new Vue2({
      el: '#nav-footer',
      render: (h) => h(vue2Component,props: { foo: fooValue })}
   )
})

</script>
<template>
    <!-- Vue 3 的其他内容 -->
    <main>...</main>

    <!-- 为 Vue 2 组件预留挂载点 -->
    <div id="nav-footer"></div>
</template>