在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 相关文章推荐
jquery ajax 同步异步的执行示例代码
Jun 23 Javascript
让浏览器非阻塞加载javascript的几种方法小结
Apr 25 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
JavaScript中this的用法实例分析
Dec 19 Javascript
JavaScript事件方法(实例讲解)
Jun 27 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
Oct 16 Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 Javascript
JS插件clipboard.js实现一键复制粘贴功能
Dec 04 Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 Javascript
Vue父子之间值传递的实例教程
Jul 02 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
Nov 17 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
php中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
PHP下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
5种PHP创建数组的实例代码分享
2014/01/17 PHP
试用php中oci8扩展
2015/06/18 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
jquery ajax跨域解决方法(json方式)
2014/02/04 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
2017/07/18 jQuery
React Native 真机断点调试+跨域资源加载出错问题的解决方法
2018/01/18 Javascript
实现jquery放大镜的两种方法
2018/02/22 jQuery
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
Python对文件和目录进行操作的方法(file对象/os/os.path/shutil 模块)
2017/05/08 Python
Django rest framework基本介绍与代码示例
2018/01/26 Python
django项目搭建与Session使用详解
2018/10/10 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
新加坡最佳婴儿用品店:Mamahood.com.sg
2018/08/26 全球购物
毕业生机械建模求职信
2013/10/14 职场文书
项目考察欢迎辞
2014/01/17 职场文书
《生命 生命》教学反思
2014/04/19 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
民主评议党员工作总结
2014/10/20 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
法制教育观后感
2015/06/17 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
Python如何导出导入所有依赖包详解
2021/06/08 Python
python中24小时制转换为12小时制的方法
2021/06/18 Python
Node.js实现断点续传
2021/06/23 Javascript