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进阶教程(第四课第一部分)
Apr 05 Javascript
一些常用的JS功能函数代码
Jun 23 Javascript
open 动态修改img的onclick事件示例代码
Nov 13 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
Google 地图类型详解及示例代码
Aug 06 Javascript
完美解决IE9浏览器出现的对象未定义问题
Sep 29 Javascript
easyui导出excel无法弹出下载框的快速解决方法
Nov 10 Javascript
详解微信小程序 相对定位和绝对定位
May 11 Javascript
vue 表单输入格式化中文输入法异常问题
May 30 Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 Javascript
JS正则表达式常见函数与用法小结
Apr 13 Javascript
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
如何基于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数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
php+mysqli使用面向对象方式查询数据库实例
2015/01/29 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
jquery 追加tr和删除tr示例代码
2013/09/12 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
2016/07/19 Javascript
Bootstrap基本布局实现方法详解
2016/11/25 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
在Mac OS上搭建Python的开发环境
2015/12/24 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
对pandas数据判断是否为NaN值的方法详解
2018/11/06 Python
Flask框架 CSRF 保护实现方法详解
2019/10/30 Python
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
百联网上商城:i百联
2017/01/28 全球购物
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
C语言面试题
2015/10/30 面试题
.net工程师笔试题
2012/06/09 面试题
文员的职业生涯规划发展方向
2014/02/08 职场文书
个人查摆剖析材料
2014/10/04 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
党员反四风学习心得体会
2016/01/22 职场文书