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 相关文章推荐
EditPlus注册码生成器(js代码实现)
Mar 25 Javascript
js单独获取一个checkbox看其是否被选中
Sep 22 Javascript
实例解析jQuery中proxy()函数的用法
May 24 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
简单实现js页面切换功能
Jan 10 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 Javascript
Vuex 进阶之模块化组织详解
Jan 12 Javascript
简述JS控制台的使用
Jul 15 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 Javascript
JS学习笔记之原型链和利用原型实现继承详解
May 29 Javascript
vue单文件组件无法获取$refs的问题
Jun 24 Javascript
详解js中的几种常用设计模式
Jul 16 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实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
PHP数据库连接mysql与mysqli对比分析
2016/01/04 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
Angularjs自定义指令实现分页插件(DEMO)
2017/09/16 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
2017/12/26 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
教你使用vue-cli快速构建的小说阅读器
2019/05/13 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
django1.8使用表单上传文件的实现方法
2016/11/04 Python
django数据库migrate失败的解决方法解析
2018/02/08 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
Python实现的质因式分解算法示例
2018/05/03 Python
pycharm设置注释颜色的方法
2018/05/23 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
SCDKey德国:全球领先的数字游戏市场
2019/04/09 全球购物
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
彩色的非洲教学反思
2014/02/18 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书