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 相关文章推荐
FireFox与IE 下js兼容触发click事件的代码
Nov 20 Javascript
js获取下拉列表框中的value和text的值示例代码
Jan 11 Javascript
jquery实现鼠标滑过显示提示框的方法
Feb 05 Javascript
JavaScript控制按钮可用或不可用的方法
Apr 03 Javascript
JavaScript函数内部属性和函数方法实例详解
Mar 17 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 Javascript
bootstrap布局中input输入框右侧图标点击功能
May 16 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
Jul 21 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
AngularJs ng-route路由详解及实例代码
Sep 14 Javascript
Bootstrap响应式表格详解
May 23 Javascript
基于JavaScript实现随机点名器
Feb 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版(1)
2006/10/09 PHP
smarty section简介与用法分析
2008/10/03 PHP
php学习笔记 数组的常用函数
2011/06/13 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
smarty内置函数foreach用法实例
2015/01/22 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
js获取div高度的代码
2008/08/09 Javascript
js左侧三级菜单导航实例代码
2013/09/13 Javascript
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
ES6正则表达式扩展笔记
2017/07/25 Javascript
js Date()日期函数浏览器兼容问题解决方法
2017/09/12 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
python使用xmlrpc实例讲解
2013/12/17 Python
Python psutil模块简单使用实例
2015/04/28 Python
遍历python字典几种方法总结(推荐)
2016/09/11 Python
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
python实现用户管理系统
2018/01/10 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
西式婚礼证婚词
2014/01/12 职场文书
结婚邀请函范文
2014/01/14 职场文书
绿化先进工作者事迹材料
2014/01/30 职场文书
青年教师个人总结
2015/02/11 职场文书
2016小学优秀教师先进事迹材料
2016/02/26 职场文书
残联2016年全国助残日活动总结
2016/04/01 职场文书
Python爬虫中urllib3与urllib的区别是什么
2021/07/21 Python
Python实现制作销售数据可视化看板详解
2021/11/27 Python
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js