站长工具网站排名,湛江网站建设方案咨询,上海哪家公司提供专业的网站建设,做土地租赁买卖的网站有哪些背景#xff1a;
公司管理平台项目一直是前辈用jQuery做的#xff0c;为扩展根据自身的技术栈#xff0c;将jQuery的老项目嵌套入vue3的框架#xff0c;新功能用vue开发#xff0c;旧的功能不动直接在vue3用iframe容器来展示
嵌套步骤
2种方式嵌套#xff0c;一个是已…背景
公司管理平台项目一直是前辈用jQuery做的为扩展根据自身的技术栈将jQuery的老项目嵌套入vue3的框架新功能用vue开发旧的功能不动直接在vue3用iframe容器来展示
嵌套步骤
2种方式嵌套一个是已经上线的网站一个是本地静态页面html 一、嵌套一个已经部署好的jQuery网站
vue3管理平台框架使用了
vue3-element-admin: Vue3 Vite TypeScript Element-Plus的后台管理系统模板配套接口文档和后端源码vue-element-admin的Vue3版本。
将项目下载运行即可 # 切换目录
cd vue3-element-admin# 安装 pnpm
npm install pnpm -g# 安装依赖
pnpm install# 启动运行
pnpm run dev打开项目先写一个路由跟菜单栏
在src/router目录创建一个mockRouter.ts用来配置菜单跳转到iframe效果如下点击的菜单出来了。 mockRouter.ts源码 export const mockRoutes [{path: /test,component: Layout,redirect: /test,name: Test,meta: { title: jquery引入测试, icon: nested, roles: [ADMIN] },children: [{path: personnelFile,component: iframe/index,name: PersonnelFile,meta: { title: 老项目, roles: [ADMIN], query: { url: https://cn.vuejs.org/ }, iframe: true },children: [{path: view,iframeComponent: iframe/index,name: personnelFileView,meta: { title: 查看个人档案, roles: [ADMIN], hidden: true}},{path: myExamInfo/:tagText,component: iframe/index,name: personnelFileViewExam,meta: { title: 考试详情, roles: [ADMIN], hidden: true }}]}]}
]老项目的路径我用vue3官方展示文档网站测试 url: https://cn.vuejs.org/ 可以根据自己的项目部署路径配置 创建一个iframe容器用于嵌套展示原来的html /views/iframe/index.vue 源码
templatediv classapp-container styleheight:100%;background-color: #f1f4f9;!-- div idchildApp/div --iframe v-ifurl nameiframeChild idiframeChild :srcurl width100% frameborder0 scrollingnorefiframeDom/iframeNodata v-else/Nodata/div
/templatescript setup langts
import { useRoute } from vue-router;
import Nodata from /views/error-page/404.vue;
const route useRoute();
let url route?.meta.query?.url;
console.log(useRoute())/script
style langscss scoped
iframe {background: #f1f4f9;min-height: calc(100vh - 84px)
}
/style在这里iframe指向路径为 https://cn.vuejs.org/ 运行效果。 二、嵌套一个当前本地jQuery项目本地html)
如果要指向当前项目静态页面html,可以放在index.html目录下。然后修复配置的路由mockRouters.ts指向 //meta: { title: 老项目, roles: [ADMIN], query: { url: https://cn.vuejs.org/ }, iframe: true },meta: { title: 老项目, roles: [ADMIN], query: { url: http://localhost:3000/test/test1.html }, iframe: true }, vue3项目运行的配置是http://localhost:3000/ 然后要指向的静态页面路由配置url http://localhost:3000/test/test1.html 当前vue项目其他静态jQuery页面html运行项目效果 test1.html源码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div idoverview stylebackground-color: #bfc;height: 200px;width: 200pxTEST/div
/body
/html
