vue路由打开新窗口

时间:2022-09-17 16:18:23

一. <router-link>标签实现新窗口打开:

官方文档中说 v-link 指令被 <router-link> 组件指令替代,且 <router-link> 不支持 target="_blank" 属性,如果需要打开一个新窗口必须要用<a>标签,但事实上vue2版本的 <router-link> 是支持  target="_blank" 属性的(tag="a"),示例如下:

<router-link tag="a" target="_blank" :to="{name:'searchGoods',params:{catId:0},query:{keywords:'手机'}}">热门好货</router-link>

注:只有tag="a"模式下  target="_blank" 属性才会生效。

二. 编程式导航:

有些时候需要在单击事件或者在函数中实现页面跳转,那么可以借助router的示例方法,通过编写代码实现。我们常用的是 $router.push 和 $router.go ,但是vue2.0以后,这种方式就不支持新窗口打开的属性了。这两种平常用的都比较多,这里就不再赘述。百度了下,找到了使用 $router.resolve 这种方法能够实现新窗口打开,示例代码如下:

let routeData = this.$router.resolve({
name: "searchGoods",
query: params,
params:{catId:params.catId}
});
window.open(routeData.href, '_blank');

三、直接使用a标签:

<a href="http://localhost:8088/" target="_blank">{{ msg }}</a>

vue路由打开新窗口的更多相关文章

  1. iframe嵌套vue页面打开新窗口

    iframe嵌套vue页面时目录结构为下图: 此时出口文件指向index.html, 所以只需要用a标签动态拼接href, 并设置属性 target="_blank" ,即可在if ...

  2. vue打开新窗口并且实现传参,有图有真相

    我要实现的功能是打开一个新窗口用来展示新页面,而且需要传参数,并且参数不能显示在地址栏里面,而且当我刷新页面的时候,传过来的参数不能丢失,要一直存在,除非我手动关闭这个新窗口,即浏览器的标签页. 通过 ...

  3. vue iframe嵌套单页面时打开新窗口并自定义浏览器标题

    vue打开新窗口两种写法,效果一样: 第一种: router-link 传参用query或者params都可以,tagget和tag一定要加上才可以: 第二种: 直接写成a标签就可以了. 改变浏览器窗 ...

  4. Post方式打开新窗口

    最近在做一个跟ERP相连的领料网站,用到POST的方法打开新窗口来打印报表 代码转别人的,在这里记一下: javascript代码 function openPostWindow(url, data1 ...

  5. javacript实现不被浏览器拦截打开新窗口

    情景: 1.用户发送数据到服务器 2.服务器根据用户的数据生成文档 3.服务器把所生成的文档的下载地址提供给用户 4.用户使用的浏览器自动根据下载地址下载文件 实现: 网上搜索查找了下实现方式,就我查 ...

  6. 使用BOM 的window对象属性打开新窗口

    ★  示例1 要求:弹出新窗口,并向新窗口写入动态HTML代码 代码 <buttononclick="btnOpen()">打开新窗口</button> & ...

  7. ajax请求成功后打开新窗口地址

    转自:http://www.cnblogs.com/linjiqin/p/3148205.html jQuery.ajax({       "type":"post&qu ...

  8. Response&period;Write 打开新窗口

    Response.Write 打开新窗口 string url=" XXX.aspx?aaa="+bbb"; Response.Write(" <scri ...

  9. 打开新窗口(window&period;open) 用法

    窗口名称:可选参数,被打开窗口的名称. 1.该名称由字母.数字和下划线字符组成. 2."_top"."_blank"."_selft"具有特 ...

随机推荐

  1. MS SQLServer 2008数据库处于SUSPECT情况下的处理

    做任何恢复操作之前,请先备份.mdf, .ndf和.ldf文件. use master go --将处于suspect状态下的数据库设置为紧急状态 alter database <Databas ...

  2. functools模块

    from functools import wraps def logged(func):     @wraps(func)     def with_logging(*args, **kwargs) ...

  3. MySQL server PID file could not be found&excl;

    重启mysql提示MySQL server PID file could not be found! Starting MySQL...The server quit without updating ...

  4. HR外包系统 - 员工项目 薪资项目 考勤项目 -管理

    项目管理-包括员工项目 薪资项目 考勤项目 一 后台总公司定义项目-前台分公司选择项目,定义别名-分公司客户选择员工项目,定义别名 分公司下面-新建薪资类别-薪资类别下面选择要的薪资和考勤项目. 二 ...

  5. C&num; 利用 HttpWebRequest 和 HttpWebResponse 模拟登录有验证码的网站

    原文:C# 利用 HttpWebRequest 和 HttpWebResponse 模拟登录有验证码的网站 我们经常会碰到需要程序模拟登录一个网站,那如果网站需要填写验证码的要怎样模拟登录呢?这篇文章 ...

  6. c&num; 去除字符串中重复字符

    String.Join 和 Distinct 方法 https://www.cnblogs.com/louby/p/6224960.html 1.在写程序中经常操作字符串,需要去重,以前我的用方式利用 ...

  7. Spring mvc学习指南

    使用flash attribute(闪存传值) 在配置文件中添加<mvc:annotion-driven/> 在controller方法参数里面添加RedirectAttributes r ...

  8. 创建ndarray

    Numpy最重要的一个特点就是其N维数组对象(即ndarray),该对象是一个快速而灵活的大数据集容器,是一个通用的同构数据多维容器,也就是说,其中的所有元素必须是相同类型的. 创建数组最简单的方法就 ...

  9. nginx 日志log&lowbar;format格式

    官方文档: http://nginx.org/en/docs/http/ngx_http_log_module.html The ngx_http_log_module module writes r ...

  10. OSI七层协议概念详解

    OSI七层模型 相关协议 缩写 应用层 HTTP 超文本传输协议 FTP 文件传输协议 SMTP 简单邮件传输协议 TELNET TCP/IP终端仿真协议 POP3 邮局协议第三版 Finger 用户 ...