vue网页嵌入第三方网页,vue 引入外部js
本文主要介绍了在vue中嵌入外部网站的实现，具有很好的参考价值。希望对大家有帮助。来和边肖一起看看吧。
利用iframe
顶部：导航栏的高度
Left:左侧菜单栏的宽度
Src:嵌入在右侧页面的外部网站
模板
差异
iframe src= https://www . icon font . cn/ id= mobsf scrolling= no frame border= 0 style= position:absolute；top:64px；左：240px右：0px底部：100像素；/iframe
/div
/模板
脚本
导出默认值{
data () {
返回{
}
},
已安装(){
/**
* iframe-宽高自适应显示
*/
函数changemobusfiframe(){
const mobsf=document . getelementbyid( mobsf )；
const device width=document . body . client width；
const device height=document . body . client height；
mobsf . style . width=(Number(device width)-240) px ；//Number是页面布局宽度的差值。
mobsf . style . height=(Number(device height)-64)“px”；//数字是页面布局的高度差
}
changeMobsfIframe()
window.onresize=function(){
changeMobsfIframe()
}
}
}
/脚本
补充知识：导航钩子有哪几种，如何将数据传入下一个点击的路由页面
1.全局导航守卫
//前挂钩
router.beforeEach((收件人，发件人，下一个)={
//做点什么
})
//Post挂钩(没有下一个参数)
router.afterEach((收件人，发件人)={
//做点什么
})
2.路由独享守卫
const router=new VueRouter({
路线：[
{
路径：“/file”，
组件：文件，
beforeEnter:(收件人，发件人，下一个)={
//做点什么
}
}
]
})
3.组件内的导航钩子
组件中有三种导航挂钩，分别是beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave。它们直接在路由组件中定义。
data(){
返回{
优点：“产品”
}
},
beforeRouteEnter:(收件人，发件人，下一个)={
console.log(至)
接下来(虚拟机={
console.log(vm.pro)
})
}
注意：beforeRouteEnter不能获得组件实例this，因为在guard执行它之前组件实例还没有被创建。我们可以通过向next发送回调来访问组件实例。当导航被确认时，这个回调将被执行，然后我们可以访问组件实例。
只有beforeRouterEnter支持将回调传递给next，其他两个不支持，因为剩下的两个钩子正常情况下可以获取组件实例this。
4.params和query
Params传输参数
这个。$router.push({
名称：详细信息，
参数：{
姓名：小明
}
});
//接收
这个。$route.params.name
询问
这个。$router.push({
路径：“/detail”，
查询：{
姓名：小明
}
});
//接收
这个。$route.query.id
query和params的区别
Params只能使用名称引入路由，query可以同时使用名称和路径(通常是path)。
Params类似于post方法，参数不显示在地址栏中。
查询类似于get。页面跳转时，可以在地址栏看到参数。
补充：
路由器是VueRouter的一个实例。如果要导航到不同的url，请使用router.push方法。
$route是当前路由器的跳转对象，获取名称、路径、查询、参数等数据。
以上在vue中嵌入外部网站的实现就是边肖分享的全部内容。希望给大家一个参考，多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。