平常做单页面的场景比较多,所以大部分的业务是在同一个页面进行跳转。要通过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. July 01st. 2018, Week 27th. Sunday

    Empty your cup so that it may be filled. 清空杯子,方能再次装满. From Bruce Lee. We can't learn anything new if ...

  2. JS INPUT输入的时候全角自动转为半角

    function CtoH(obj){var str=obj.value;var result="";for (var i = 0; i < str.length; i++) ...

  3. eShopOnContainers 知多少[2]:Run起来

    环境准备 Win10(开启Hyper-V) .NET Core SDK Docker for Windows VS2017 or VS Code Git SQL Server Management S ...

  4. 3. [leetcode] Longest Substring Without Repeating Characters

    Given a string, find the length of the longest substring without repeating characters. Examples Give ...

  5. 跨域405(Method Not Allowed)问题

    zepot post没有问题,用plupload上传出现了这个错误,options过不去.显示Response for preflight has invalid http status code 4 ...

  6. 【RL-TCPnet网络教程】第39章 RL-TCPnet之TFTP服务器

    第39章     RL-TCPnet之TFTP服务器 本章节为大家讲解RL-TCPnet的TFTP服务器应用,学习本章节前,务必要优先学习第38章的TFTP基础知识.有了这些基础知识之后,再搞本章节会 ...

  7. java虚拟机内存区域

    java虚拟机运行时数据 程序计数器 是一块较小的内存空间,属于线程私有的内存. 用来记录正在执行的虚拟机字节码指令的地址. 每个线程都需要一个独立的程序计数器,各个线程间的计数器互不影响,独立存储. ...

  8. ansible基础-变量

    一 变量的命名规范 变量的命名应该符如下合两个规范: 变量应该由字母.数字.下划线组成 变量应该以字母开头 例如:host_port.HOST_PORT.var5是符合命名规范的,foo-port. ...

  9. FileSizeUtil【获取文件夹或文件的大小】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 获取文件夹或者文件的大小,可以指定单位,也可以自动计算合适的单位值. 效果图 代码分析 常用的方法: getFolderOrFile ...

  10. springboot~maven制作底层公用库

    把一些公用方法,类型抽象到一个项目里,让其它项目依赖它,这种设计是一种解耦的体现,其实像springboot就是我们的一种依赖,他里面有很多子模块,用到哪个就添加哪个依赖即可,像redis,mongo ...