Vue 路由间跳转和新开窗口的方式(query、params)


Posted in Javascript onDecember 25, 2019

路由间跳转配置:

query 方式

参数会在url中显示

this.$router.push({ 
  // query方式
  path: "/a",
  query: {
    projectDetails: val
  },

params 方式

传参数据不会在导航栏中显示,需要配合路由的name属性使用

// params 方式
   name: 'a',
   params: {
      projectDetails: val
   }

新开页面

需要使用resolve配置

const {href} = this.$router.resolve({
  path: '/a',
  query: {
   code: '123',
  }
 })
 window.open(href, '_blank')

这里需要注意一下,使用params进行传参,在新页面内使用this.$route.params对象为{},参数无法传过来,query是可以正常传参。

我想这个应该跟我们正常打开一个链接是一样的,因为router-link的tag='a',应该是个超链接。

这个只是我的个人想法,欢迎指正。

如果遇到这种情况,不想参数在url上显示且必须要传的话,可以借用浏览器的缓存来实现。

在父页面写入缓存,在子页面从缓存中读取,读取之后再删除。

总结

以上所述是小编给大家介绍的Vue 路由间跳转和新开窗口的方式(query、params),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Javascript new关键字的玄机 以及其它
Aug 25 Javascript
jQuery+easyui中的combobox实现下拉框特效
Feb 27 Javascript
Redis基本知识、安装、部署、配置笔记
Mar 05 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
Jan 20 Javascript
BootStrap注意事项小结(五)表单
Mar 10 Javascript
利用C/C++编写node.js原生模块的方法教程
Jul 07 Javascript
Angular通过angular-cli来搭建web前端项目的方法
Jul 27 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 Javascript
Vue-cli3简单使用(图文步骤)
Apr 30 Javascript
浅谈一个webpack构建速度优化误区
Jun 24 Javascript
如何基于JS截获动态代码
Dec 25 #Javascript
通过微信公众平台获取公众号文章的方法示例
Dec 25 #Javascript
vue远程加载sfc组件思路详解
Dec 25 #Javascript
node实现mock-plugin中间件的方法
Dec 25 #Javascript
微信小程序停止其他视频播放当前视频的实例代码
Dec 25 #Javascript
vue分页插件的使用方法
Dec 25 #Javascript
继承行为在 ES5 与 ES6 中的区别详解
Dec 24 #Javascript
You might like
PHP通过header实现文本文件下载的代码
2010/08/08 PHP
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
PHP中把错误日志保存在系统日志中(Windows系统)
2015/06/23 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
Prototype Selector对象学习
2009/07/23 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
js中reverse函数的用法详解
2013/12/26 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
相册展示PhotoSwipe.js插件实现
2016/08/25 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
2016/12/08 Javascript
JavaScript实现按键精灵的原理分析
2017/02/21 Javascript
使用jQuery卸载全部事件的思路详解
2017/04/03 jQuery
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
Python中的zip函数使用示例
2015/01/29 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
python PIL模块的基本使用
2020/09/29 Python
HTML5 Canvas API中drawImage()方法的使用实例
2016/03/25 HTML / CSS
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
澳大利亚网上书店:QBD
2021/01/09 全球购物
高级护理专业毕业生推荐信
2013/12/25 职场文书
银行进社区活动总结
2014/07/07 职场文书
组工干部对照检查材料
2014/08/25 职场文书
大三学生学年自我鉴定
2014/09/12 职场文书
灵山大佛导游词
2015/02/04 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书
伊索寓言读书笔记
2015/06/30 职场文书
Python下opencv库的安装过程及问题汇总
2021/06/11 Python
python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)
2022/04/06 Python
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers
Windows server 2016服务器基本设置
2022/08/14 Servers