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 异步调用框架 (Part 6 - 实例 & 模式)
Aug 04 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 Javascript
Jquery getJSON方法详细分析
Dec 26 Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 Javascript
JavaScript中的对象与JSON
Jul 03 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
JavaScript实现in-place思想的快速排序方法
Aug 07 Javascript
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
在Vue mounted方法中使用data变量详解
Nov 05 Javascript
js实现抽奖的两种方法
Mar 19 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
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
整合了前面的PHP数据库连接类~~做成一个分页类!
2006/11/25 PHP
PHP sprintf() 函数的应用(定义和用法)
2012/06/29 PHP
去除php注释和去除空格函数分享
2014/03/13 PHP
ThinkPHP通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
php 读取文件夹下所有图片、文件的实例
2018/10/17 PHP
JS获取IUSR_机器名和IWAM_机器名帐号的密码
2006/12/06 Javascript
json 定义
2008/06/10 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
JQUERY dialog的用法详细解析
2013/12/19 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
2015/03/19 Javascript
Json解析的方法小结
2016/06/22 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
浅谈Vuejs Prop基本用法
2017/08/17 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
浅谈js中的bind
2019/03/18 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
python中使用psutil查看内存占用的情况
2018/06/11 Python
python打开windows应用程序的实例
2019/06/28 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
pytorch使用tensorboardX进行loss可视化实例
2020/02/24 Python
python中watchdog文件监控与检测上传功能
2020/10/30 Python
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
运动鞋、街头服装、手表和手袋的实时市场:StockX
2020/11/25 全球购物
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
表演方阵解说词
2014/02/08 职场文书
卫生标语大全
2014/06/21 职场文书
加强作风建设工作总结
2014/10/23 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
HTML基础详解(上)
2021/10/16 HTML / CSS