在vue中嵌入外部网站的实现


Posted in Javascript onNovember 13, 2020

利用iframe

top:导航栏的height

left:左侧菜单栏的width

src:右侧页面要嵌入的外部网站

<template>
 <div>
  <iframe src="https://www.iconfont.cn/" id="mobsf" scrolling="no" frameborder="0" style="position:absolute;top:64px;left: 240px;right:0px;bottom:100px;"></iframe>
 </div>
</template> 
 
<script>
 export default {
  data () {
   return {
   }
  },
  mounted(){
   /**
   * iframe-宽高自适应显示 
   */
   function changeMobsfIframe(){
    const mobsf = document.getElementById('mobsf');
    const deviceWidth = document.body.clientWidth;
    const deviceHeight = document.body.clientHeight;
    mobsf.style.width = (Number(deviceWidth)-240) + 'px'; //数字是页面布局宽度差值
    mobsf.style.height = (Number(deviceHeight)-64) + 'px'; //数字是页面布局高度差
   }

   changeMobsfIframe()

   window.onresize = function(){
    changeMobsfIframe()
   }
  }
 }
</script>

在vue中嵌入外部网站的实现

补充知识:导航钩子有哪几种,如何将数据传入下一个点击的路由页面

1.全局导航守卫

//前置钩子
router.beforeEach((to,from,next)=>{
 //do something
})
//后置钩子(没有next参数)
router.afterEach((to, from)=>{
 // do something
})

2.路由独享守卫

const router = new VueRouter({
 routes: [
 {
  path: '/file',
  component: File,
  beforeEnter: (to, from, next)=>{
  //do something
  } 
 }
 ]
})

3.组件内的导航钩子

组件内的导航钩子主要有三种,beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。它们是直接在路由组件内部直接进行定义的

data(){
 return{
 pro:'产品'
 }
},
beforeRouteEnter:(to,from,next)=>{
 console.log(to)
 next(vm => {
 console.log(vm.pro)
 })
}

注意:beforeRouteEnter不能获取组件实例this,因为当守卫执行前,组件实例还没被创建出来,我们可以通过给next传入一个回调来访问组件实例,在导航被确认时,会执行这个回调,这时就可以访问组件实例了。

仅仅是beforeRouterEnter支持给next传递回调,其他两个并不支持,因为剩下两个钩子可以正常获取组件实例this。

4.params和query

params传参

this.$router.push({
 name: 'detail',
 params: {
 name: 'xiaoming'
 } 
});
//接收
this.$route.params.name

query

this.$router.push({
 path: '/detail',
 query:{
 name: 'xiaoming'
 }
});
//接收
this.$route.query.id

query和params的区别

params只能用name来引入路由,query既可以用name又可以用path(通常是path)

params类似于post方法,参数不会在地址栏中显示

query类似于get,页面跳转的时候,可以在地址栏看到参数

补充:

router为VueRouter实例,想要导航到不同url,则使用router.push方法

$route为当前router跳转对象,在里边获取name,path,query,params等数据

以上这篇在vue中嵌入外部网站的实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
AJAX架构之Dojo篇
Apr 10 Javascript
javascript的onchange事件与jQuery的change()方法比较
Sep 28 Javascript
ExtJS4 表格的嵌套 rowExpander应用
May 02 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
Jan 05 Javascript
jquery实现转盘抽奖功能
Jan 06 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
Sep 19 Javascript
JavaScript onclick事件使用方法详解
May 15 Javascript
element 动态合并表格的步骤
Dec 31 Javascript
如何基于viewport vm适配移动端页面
Nov 13 #Javascript
VueCli生产环境打包部署跨域失败的解决
Nov 13 #Javascript
Vue使用Proxy代理后仍无法生效的解决
Nov 13 #Javascript
vue iview 隐藏Table组件里的某一列操作
Nov 13 #Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 #Javascript
vue print.js打印支持Echarts图表操作
Nov 13 #Javascript
vue 中使用print.js导出pdf操作
Nov 13 #Javascript
You might like
BBS(php &amp; mysql)完整版(六)
2006/10/09 PHP
PHP 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
javascript parseInt 函数分析(转)
2009/03/21 Javascript
JS window.opener返回父页面的应用
2009/10/24 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
使用GruntJS构建Web程序之构建篇
2014/06/04 Javascript
javascript中scrollTop详解
2015/04/13 Javascript
js控制div弹出层实现方法
2015/05/11 Javascript
Bootstrap 附加导航(Affix)插件实例详解
2016/06/01 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
js实现返回顶部效果
2017/03/10 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
jquery写出PC端轮播图实例
2018/01/26 jQuery
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
Python高级特性 切片 迭代解析
2019/08/23 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
2020/04/15 Python
python mysql中in参数化说明
2020/06/05 Python
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
世界上最好的帽子:Tilley
2016/11/27 全球购物
诗狄娜化妆品官方网站:Stila Cosmetics
2016/12/21 全球购物
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
Java基础面试题
2014/07/19 面试题
商务英语专业应届毕业生求职信
2013/10/28 职场文书
后勤人员岗位职责
2013/12/17 职场文书
工作表扬信的范文
2014/01/10 职场文书
白鹤梁导游词
2015/02/06 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书