平常做单页面的场景比较多,所以大部分的业务是在同一个页面进行跳转。要通过VUE路由使用新页面打开且传递参数,可以采用以下两个方法:

1.router-link的target

<router-link tag="a" target="_blank" :to="{name:'searchGoods',params:{catId:0},query:{keywords:'手机'}}">热门好货</router-link>需要注意的是,vue1不支持。

2.$router.resolve

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

  用法类似$router.push 和 $router.go  

  当然,对于比较简单的参数传递,也可以直接使用a标签在url中拼接好参数进行打开新页面跳转。

VUE路由新页面打开的方法总结的更多相关文章

  1. 前端 | Vue 路由返回恢复页面状态

    需求场景:首页搜索内容,点击跳转至详情页,页面后退返回主页,保留搜索结果. 方案:路由参数:路由守卫 需求描述 在使用 Vue 开发前端的时候遇到一个场景:在首页进行一些数据搜索,点击搜索结果进入详情 ...

  2. markdown语法链接新页面打开

    我们在写markdown语法的文章时,经常会写超链接,默认markdown的写法超链接打开页面都是在当前页面,对自己页面的访问不是很好,所以我们一般都希望在新页面打开.但是据我对markdwon的语法 ...

  3. markdown生成的a标签如何在新页面打开

    原始的超链接语法这样写:[超链接的名字](url) 在新窗口中打开:[超链接的名字](url?_blank) 在本窗口中打开:[超链接的名字](url?_self)默认是在本窗口中打开 但上面的说法貌 ...

  4. Vue路由实现页面跳转的两种方式(router-link和JS)

    Vue.js 路由可以通过不同的 URL 访问不同的内容,实现多视图的单页 Web 应用 1.通过 <router-link> 实现 <router-link> 组件用于设置一 ...

  5. react跳转url,跳转外链,新页面打开页面

    react中实现在js中内部跳转路由,有两种方法. 方法一: import PropTypes from 'prop-types'; export default class Header exten ...

  6. 随机生成n个不重复的数,范围是2-32,并让其在新页面打开

    var n = 5 var timer; function suiji(){ var arr = [] // 循环生成n个随机数 for(var i=0;i<n;i++){ var num = ...

  7. vue进入新页面,与原页面滚动到相同高度的解决方案

    可以在vue路由新增scrollBehavior,控制跳转页面高度 import Router from 'vue-router' new Router({ scrollBehavior (to, f ...

  8. IE (6-11)版本,在使用iframe的框架时,通过a标签javascript:; 和js跳转parent.location的时候 出现在新页面打开的情况

    问题描述: 使用iframe的情况下,在子框架中,使用如下形式的跳转: <a href="javascript:;" onclick="parent.locatio ...

  9. vue 路由更新页面视图未更新问题

    最近项目做面包屑的时候遇到一个问题就是路由变化的时候页面视图并没有发生变化,后来上网查,发现是vue-router的特性导致的. vue-router的切换不同于传统的页面的切换.路由之间的切换,其实 ...

随机推荐

  1. Windows提示 错误: RPC 服务器不可用 解决方法。

    试验环境: 本地主机:win10  ip:192.168.0.10 远程主机: win2008 R2   ip:192.168.1.128 我想要通过systeminfo去获取远程主机的系统信息,但是 ...

  2. 不带parent指针的successor求解

    问题: 请设计一个算法,寻找二叉树中指定结点的下一个结点(即中序遍历的后继).给定树的根结点指针TreeNode* root和结点的值int p,请返回值为p的结点的后继结点的值.保证结点的值大于等于 ...

  3. [Swift-2019力扣杯春季决赛]4. 有效子数组的数目

    给定一个整数数组 A,返回满足下面条件的 非空.连续 子数组的数目: 子数组中,最左侧的元素不大于其他元素. 示例 1: 输入:[1,4,2,5,3] 输出:11 解释:有 11 个有效子数组,分别是 ...

  4. WebPack引用Bootstrap 无法使用图标的结局方案

    npm i https://github.com/iconic/open-iconic.git -D  因为boostrap的css里删除了图标 分开了 我们在引入个呵呵. 下载:npm i boot ...

  5. [开源]WinForm 控件使用总结

    背景 都2019年了,还在用WinForm吗?哈哈,其实我也没在用,都是很多年前一些项目积累,所以代码写的有些屎,之所以开源出来,希望能给大家有所帮助,喜欢的话给 一个Star以资鼓励~: 具体代码: ...

  6. [CSS] input样式定制

    input样式 定制一个泥团input,想怎么捏就怎么捏 appearance: none 所有主流浏览器都不支持 appearance 属性. Firefox 支持替代的 -moz-appearan ...

  7. SpringBoot 2.0 mybatis mapper通用类

    <!---mybatis通用类包含mybatis和连接池 mybatis和连接池就不需要引入--> <dependency> <groupId>tk.mybatis ...

  8. 初学Shiro

    Shiro Shiro是什么? Apache Shiro是Java的一个安全(权限)框架. Shiro可以非常容易的开发出足够好的应用,其不仅可以用在JavaSE环境下,也可以用者JavaEE环境下 ...

  9. Redis入门简述

    Redis 是一个开源的,使用 ANSI C (C语言)编写,高性能的 Key-Value(键值对) 的 NoSQL 数据库 NoSQL = Not Only SQL,意即“不仅仅是SQL”,是一项全 ...

  10. 零基础学Python--------第11章 使用Python操作数据库

    第11章 使用Python操作数据库 11.1 数据库编程接口 在项目开发中,数据库应用必不可少.虽然数据库的种类有很多,如SQLite.MySQL.Oracle等,但是它们的功能基本都是一样的,为了 ...