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的切换不同于传统的页面的切换.路由之间的切换,其实 ...
随机推荐
- 织梦5.7sp1最新问题:后台不显示编辑器
1.在后台的“系统基本参数”里修改“站点设置”的“网页主页链接:空”. 2.修改“核心设置”DedeCMS安装目录:空“. 3.试试,问题解决.
- javascript中apply、call和bind的区别及方法详解
文章目录 apply.call apply.call 区别 apply.call实例 数组之间追加 获取数组中的最大值和最小值 验证是否是数组(前提是toString()方法没有被重写过) 类(伪 ...
- PHP全栈学习笔记17
phpmyadmin教程 管理页进入phpmyadmin 打开C:\wamp\apps\phpmyadmin3.5.1下的配置文件:config.inc 修改密码 创建与修改数据库.数据表 字段类型 ...
- Ubuntu 18.04.1 LTS + kolla-ansible 部署 openstack Rocky all-in-one 环境
1. kolla 项目介绍 简介 kolla 的使命是为 openstack 云平台提供生产级别的.开箱即用的自动化部署能力. kolla 要实现 openetack 部署分为两步,第一步是制作 do ...
- 9. VIM 系列 - YouCompleteMe 实现代码补全
目录 环境准备 插件安装 环境准备 $ sudo apt install build-essential cmake python3-dev python-dev $ sudo apt install ...
- Vuex,状态管理模式
对于 Vue 本人目前接触不深,只得浅层分析,Vue 是单向数据流, state,驱动应用的数据源: view,以声明方式将 state 映射到视图: actions,响应在 view 上的用户输入导 ...
- ASP.NET Core 3.0 上的gRPC服务模板初体验(多图)
早就听说ASP.NET Core 3.0中引入了gRPC的服务模板,正好趁着家里电脑刚做了新系统,然后装了VS2019的功夫来体验一把.同时记录体验的过程.如果你也想按照本文的步骤体验的话,那你得先安 ...
- 安恒杯 3月线上个人赛WriteUp
#前言 这次做的还挺多的,只有个Web300没做出来,排名由上次60+进步到这次16名(最后三分钟掉了5名),感觉还是不错的.但是很明显,流量题有很大的运气成分.做完流量题之后还剩一个多小时,水了水M ...
- GlideDemo【Glide3.7.0版本的简单使用以及圆角功能】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 本Demo主要记录Glide3.7.0版本的简单运用和实现圆角方案. 效果图 代码分析 Glide的centerCrop()和fit ...
- 前端CSS学习-Background背景相关
在CSS中 背景属性用于定义HTML元素的背景. background主要设置一下五个属性: background-color // 设置元素的背景颜色. background-image // 把 ...