VUE路由新页面打开的方法总结
平常做单页面的场景比较多,所以大部分的业务是在同一个页面进行跳转。要通过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路由新页面打开的方法总结的更多相关文章
- 前端 | Vue 路由返回恢复页面状态
需求场景:首页搜索内容,点击跳转至详情页,页面后退返回主页,保留搜索结果. 方案:路由参数:路由守卫 需求描述 在使用 Vue 开发前端的时候遇到一个场景:在首页进行一些数据搜索,点击搜索结果进入详情 ...
- markdown语法链接新页面打开
我们在写markdown语法的文章时,经常会写超链接,默认markdown的写法超链接打开页面都是在当前页面,对自己页面的访问不是很好,所以我们一般都希望在新页面打开.但是据我对markdwon的语法 ...
- markdown生成的a标签如何在新页面打开
原始的超链接语法这样写:[超链接的名字](url) 在新窗口中打开:[超链接的名字](url?_blank) 在本窗口中打开:[超链接的名字](url?_self)默认是在本窗口中打开 但上面的说法貌 ...
- Vue路由实现页面跳转的两种方式(router-link和JS)
Vue.js 路由可以通过不同的 URL 访问不同的内容,实现多视图的单页 Web 应用 1.通过 <router-link> 实现 <router-link> 组件用于设置一 ...
- react跳转url,跳转外链,新页面打开页面
react中实现在js中内部跳转路由,有两种方法. 方法一: import PropTypes from 'prop-types'; export default class Header exten ...
- 随机生成n个不重复的数,范围是2-32,并让其在新页面打开
var n = 5 var timer; function suiji(){ var arr = [] // 循环生成n个随机数 for(var i=0;i<n;i++){ var num = ...
- vue进入新页面,与原页面滚动到相同高度的解决方案
可以在vue路由新增scrollBehavior,控制跳转页面高度 import Router from 'vue-router' new Router({ scrollBehavior (to, f ...
- IE (6-11)版本,在使用iframe的框架时,通过a标签javascript:; 和js跳转parent.location的时候 出现在新页面打开的情况
问题描述: 使用iframe的情况下,在子框架中,使用如下形式的跳转: <a href="javascript:;" onclick="parent.locatio ...
- vue 路由更新页面视图未更新问题
最近项目做面包屑的时候遇到一个问题就是路由变化的时候页面视图并没有发生变化,后来上网查,发现是vue-router的特性导致的. vue-router的切换不同于传统的页面的切换.路由之间的切换,其实 ...
随机推荐
- leaflet 学习备忘
leaflet 开源js地图工具.非常好用. leaflet参考:http://leafletjs.com/ 特性: 完全开源,可以基于不同的第三方瓦片生成地图. 基于原始GPS,无需转换 可创建离线 ...
- Servlet不再是烦恼
Servlet 一.什么是Servlet? Servlet是在服务器上运行的小程序,也就是一个Java类,但比较特殊,不需要new,自动就可以运行.也有创建.垃圾回收和销毁过程.Servlet是Jav ...
- dataframe行变换为列
新建一个 dataFrame : val conf = new SparkConf().setAppName("TTyb").setMaster("local" ...
- ReentrantLock是如何基于AQS实现的
ReentrantLock是一个可重入的互斥锁,基于AQS实现,它具有与使用 synchronized 方法和语句相同的一些基本行为和语义,但功能更强大. lock和unlock ReentrantL ...
- 如何开发AR增强现实应用与产品
2016年被称为VR元年,可见火爆程度,但是我要告诉你,其实还有一种技术AR(增强现实)技术,才是下一个真正的“风口”技术.可以预见的是,未来AR应用爆发之时,必将超越VR产业规模,开拓千亿级市场空间 ...
- springcloud情操陶冶-springcloud config server(一)
承接前文springcloud情操陶冶-springcloud context(二),本文将在前文基础上浅析下ConfigServer的工作原理 前话 根据前文得知,bootstrapContext引 ...
- Celery工具
什么是Celery Celery的功能 Celery是基于python实现的第三方组件,可以实现定时任务.周期任务等. Celery的组成 Celery的角色 - 任务,创建或发布任务. - 使用re ...
- 常见js报错
1Uncaught TypeError: Cannot read property 'length' of null Uncaught TypeError: Cannot read property ...
- [转]使用nodejs-koa2-mysql-sequelize-jwt 实现项目api接口
本文转自:https://blog.csdn.net/yibowanbo/article/details/80521849 nodejs-koa2-mysql-sequelize-jwt技术栈:nod ...
- asp.net后台管理系统-登陆模块-是否自动登陆
FormsAuthentication.SetAuthCookie(UserFlag, createPersistentCookie); createPersistentCookie是否永久保存coo ...