需求:在后台管理系统首页列表项中,点击详情跳转到系统中指定菜单的路由要求新开窗口并需要带上参数查询。

第一种方法:

1 const { id } = item;
2 let routeUrl = this.$router.resolve({
3 path: '/xxx', // 路由地址
4 query: { id } // 参数信息
5 });
6 window.open(routeUrl.href, '_blank');

第二种方法:

1 <router-link :to="{path:'/xxx', query:{id:1}}" target="_blank"> 2 </router-link>

鉴定完毕,欢迎友们一起交流学习!!

Vue路由新开页面跳转和传参传递的更多相关文章

  1. (day68)Vue-CLI项目、页面跳转和传参、生命周期钩子

    目录 一.Vue-CLI (一)环境搭建 (二)项目的创建 (三)项目目录结构 (四)Vue组件(.vue文件) (五)全局脚本文件main.js(项目入口) (六)Vue请求生命周期 二.页面跳转和 ...

  2. 微信小程序开发:学习笔记[8]——页面跳转及传参

    微信小程序开发:学习笔记[8]——页面跳转及传参 页面跳转 一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层 ...

  3. vue页面跳转以及传参和取参

    vue中this.$router.push()路由传值和获取的两种常见方法 1.路由传值   this.$router.push() (1) 想要导航到不同的URL,使用router.push()方法 ...

  4. vue:页面跳转和传参(页面之间,父传子,子传父)

    1.返回上一个页面: A.<a @click="$router.back(-1)" class="btn">重新加载</a> B.thi ...

  5. react-navigation 页面跳转 及 传参

    1.配置路由 export const AppNavigator = createStackNavigator ( { Guide: { // 引导页 screen: GuidePage }, Lau ...

  6. JS完成页面跳转并传参的方法|附加:循环遍历对象

    此方法只能传递较少参数 方法如下: <a href='page/index.html'>跳转</a> 以上是正常写法,如果要传参按一下写法: <!--参数写在?后面,多个 ...

  7. 微信小程序——页面跳转及传参

    小程序页面跳转 微信小程序的页面跳转依然是以传统的请求转发和请求重定向为主,tabbar的存在,有TAB页面的跳转. 为了微信小程序的简介方便,规定页面路径只能是十层,应尽量避免过多的交互方式. 1. ...

  8. Web jsp开发学习——实现页面跳转和传参

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletExcepti ...

  9. JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参

    <script src="jquery.min.js" type="text/javascript"></script> <scr ...

  10. 解决java新开页面被拦截的问题

    在开发中遇到from表单利用 target="_blank" 属性新开页面时被拦截. 用ajax让form表单提交,这时有可能浏览器会拦截新开页面,这时只 需要设置 ajax 同步 ...

随机推荐

  1. Centos7安装配置Hive

    Centos7安装配置 一 . 安装 安装就不多做详述,选择好自己的镜像设置好路径即可 二 .配置 2.1 网络配置 桌面右键进入 cmd 命令编辑窗口,在 Linux 中设置网络的相关配置都需要管理 ...

  2. go语言字符与字符串相关

    ASCII ASCII(American Standard Code for Information Interchange,美国信息交换标准代码)是基于拉丁 字母的一套单字节编码系统 字符 本质上来 ...

  3. HStore表全了解:实时入库与高效查询利器

    摘要:本文章将从使用者角度介绍HStore概念以及使用. 本文分享自华为云社区<GaussDB(DWS)HStore表讲解>,作者:大威天龙:- . HStore表简介 面对实时入库和实时 ...

  4. 智能合约HardHat框架环境的搭建

    1.首先创建一个npm项目 PS C:\Users\lcds\blockchainprojects> mkdir hardhatcontract PS C:\Users\lcds\blockch ...

  5. celery笔记六之worker介绍

    本文首发于公众号:Hunter后端 原文链接:celery笔记六之worker介绍 前面我们介绍过 celery 的理想的设计方式是几个 worker 处理特定的任务队列的数据,这样可以避免任务在队列 ...

  6. 10分钟讲清int 和 Integer 的区别

    其实在Java编程中,int和Integer都是非常常用的数据类型,但它们之间存在一些关键的区别,特别是在面向对象编程中.所以接下来,就让我们一起来探讨下关于int和Integer的区别这个问题吧. ...

  7. git推送时被拒绝,发现class文件被人上传到仓库的解决办法

    写好的代码commit之后,想要推送到远端,结果发现有同事提交了class文件 这时候我们需要执行以下指令 git stash git pull git stash pop 原理:先把commit的东 ...

  8. 前端Vue组件之仿京东拼多多领取优惠券弹出框popup 可用于电商商品详情领券场景使用

    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身.通过组件化开发,可以有效 ...

  9. 本地数据local storage和session storage

    随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据, HTML5规范提出了相关解决方案. 本地存储特性 1.数据存储在用户浏览器 ...

  10. GitLab 无仓库 中了勒索病毒

    坑爹的记录一下,并没有解决 Gitlab 昨天(2021-11-29)打开之后看不到项目了,下面这个吊样子 最后发现中病毒了,一堆的这个吊毛文件,复制一个打开看了一下 你别说这个黑客网页写的还不错,这 ...