vue如何使用window.open打开页面并拼接参数

 

使用window.open打开页面并拼接参数

window.open常用来在项目中链接外部网站,接收三个参数

1.strUrl,要打开的页面或资源的url地址

2.strWindowName,窗口的名字,用于后续对该窗口的引用,不是窗口的标题。该参数除了支持普通的名字外,还支持和a标签一样的特殊关键字:_self(当前窗口)、_blank(空白窗口)、_parent(父窗口)、_top(顶级窗口)

3.strWindowFeatures,窗口的描述参数,如尺寸、位置、是否启用工具栏等。各个参数由逗号隔开,参数之间以等号连接。可以指定窗口的大小和位置。

如果需要在地址后拼接参数,可以对地址使用转义字符,使用${}拼接参数。

window.open(`http://cams.mof.gov.cn/am-server/#/MigrtDetailInfo?d=${this.currentId}`, '_blank','top=10,left=10,width=400,height=200')

 

使用window.open()参数详解

打开新窗口有多种情况:

  • ①在当前页面弹出新窗口
  • ②在浏览器新打开一个标签页
  • ③替换当前页面

下面为大家介绍一下使用window.open()如何实现这两种情况。

1.window.open()有三个参数

windows.open("URL","name","configuration");
  • URL:为要新打开页面的url
  • name:为新打开窗口的名字,可以通过此名字获取该窗口对象
  • configuration:为新打开窗口的一些配置项,比如是否有菜单栏、滚动条、长高等等信息

2.举例说明

新打开一个没有菜单栏、标题栏、工具栏,但是有滚动条、状态栏、地址栏且可伸缩窗口

window.open
(
    //第一个参数
    "index.html", 
    //第二个参数
    "newWindow",
    //第三个参数 
    "width=1024, height=700, 
    top=0, left=0, 
    titlebar=no, menubar=no, 
    scrollbars=yes, 
    resizable=yes, 
    status=yes, , 
    toolbar=no, 
    location=yes"
);
  • window.open 弹出新窗口的命令;
  • ‘index.html’弹出窗口的文件名;
  • ‘newWindow’弹出窗口的名字(不是文件名),非必须,可用空’'代替;
  • width=1024 窗口宽度;
  • height=700 窗口高度;
  • top=0 窗口距离屏幕上方的象素值;
  • left=0 窗口距离屏幕左侧的象素值;
  • titlebar=no 是否显示标题栏,被忽略,除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes;
  • menubar=no 表示菜单栏,默认值是yes;
  • scrollbars=yes 是否显示滚动条,默认值是yes;
  • resizable=no 是否允许改变窗口大小,默认值是yes;
  • status=no 是否要添加一个状态栏,默认值是yes;
  • toolbar=no 是否显示工具栏,默认值是yes;
  • location=no 是否显示地址栏,默认值是yes;

3.第二个参数详解

  • _blank 表示新开一个窗口
  • _parent表示父框架窗口
  • _self表示覆盖该窗口

4.第三个参数详解

①window.open(url)或者window.open(url, name),其中name为_blank

标准浏览器、新标签打开链接url

②window.open(url, name, configration)

只要配置了configration,都是新窗口打开链接的

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程宝库

 关于./和@/的区别vue在引用路径的时候可以用 ./ 的写法引用如下:import './api/index'这个代表在相同文件下绝对路径的意思。项目中还有常见的@用法:import ut ...