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 相关文章推荐
基于jquery的高性能td和input切换并可修改内容实现代码
Jan 09 Javascript
javascript静态页面传值的三种方法分享
Nov 12 Javascript
jQuery中:radio选择器用法实例
Jan 03 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
Angularjs之filter过滤器(推荐)
Nov 27 Javascript
任意Json转成无序列表的方法示例
Dec 09 Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 Javascript
js判断文件类型大小并给出提示的实现方法
Jan 03 Javascript
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
实例分析JS中的相等性判断===、 ==和Object.is()
Nov 17 Javascript
js实现圆形显示鼠标单击位置
Feb 11 Javascript
js实现拖拽元素选择和删除
Aug 25 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学习 变量使用总结
2011/03/24 PHP
php验证码生成代码
2015/11/11 PHP
php正则表达式学习笔记
2015/11/13 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
老生常谈PHP 文件写入和读取(必看篇)
2017/05/22 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
JavaScript类库D
2010/10/24 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
小程序实现带年月选取效果的日历
2018/06/27 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
深入解析vue 源码目录及构建过程分析
2019/04/24 Javascript
vue2路由基本用法实例分析
2020/03/06 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
python使用cookie库操保存cookie详解
2014/03/03 Python
Python编程之多态用法实例详解
2015/05/19 Python
一步步解析Python斗牛游戏的概率
2016/02/12 Python
Python中Threading用法详解
2017/12/27 Python
python opencv之分水岭算法示例
2018/02/24 Python
python3监控CentOS磁盘空间脚本
2018/06/21 Python
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
PYTHON绘制雷达图代码实例
2019/10/15 Python
python集合删除多种方法详解
2020/02/10 Python
详解python UDP 编程
2020/08/24 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
2014/09/26 面试题
生物专业个人自荐信范文
2013/11/29 职场文书
业务员岗位职责范本
2013/12/15 职场文书
合同审查法律意见书
2015/06/04 职场文书