位置: IT常识 - 正文

Vue路由跳转传参或打开新页面跳转(vue页面路由传参)

编辑:rootadmin
Vue路由跳转传参或打开新页面跳转 1. 通过路由中的name属性 

推荐整理分享Vue路由跳转传参或打开新页面跳转(vue页面路由传参),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue路由跳转传参 参数不显示在url 且刷新不清除,vue路由跳转传参的三种方式,vue路由跳转传参 参数不显示在url 且刷新不清除,vue路由跳转参数丢失,vue路由跳转传参数页面不更新,vue路由跳转传参的三种方式,vue路由跳转传参 参数不显示在url 且刷新不清除,vue路由跳转传参数,内容如对您有帮助,希望把文章链接给更多的朋友!

使用params传递参数, 使用this.$route.params获取参数

这种方式传递相当于post请求, 传递的数据不会显示在url地址栏,但是页面刷新,参数会丢失

1

2

3

4

5

6

7

8

9

// 传递参数

this.$router.push({

    name: "首页",

    params: {

        code: 1

    }

})

// 获取参数

this.$route.params

 2. 通过路由属性中的path属性 

使用query传递参数, 使用this.$route.query获取参数

这种方式相当于get请求, 传递的参数会显示在url地址栏, 页面刷新,参数还保留在url上面

1

2

3

4

5

6

7

8

9

// 传递参数

this.$router.push({

    path: "/dashboard",

    query: {

        code: 1

    }

})

// 获取参数

this.$route.query

在获取传递参数的时候都是使用this.$route

 3. $router 和 $route的区别

$router 可以看到$router是全局路由VueRouter实例

$route是存放路由信息的一个对象, 传递的数据都是存放在$route中

Vue路由跳转传参或打开新页面跳转(vue页面路由传参)

4. 在Vue项目中点击跳转打开一个新的页面

使用this.$router.resolve({path: "/login"})可以获取到指定的路由的信息

使用window.open(routeData.href, '_blank')在新窗口中打开指定的路由页面

query:{code: 1}传递参数, 但是可以在url地址栏中看到传递的参数

通过this.$route.query获取参数

1

2

let routeData = this.$router.resolve({ path: '/login',query: {loginName}});

window.open(routeData.href, '_blank');

 vue的跳转(打开新页面)

router-link跳转

1

2

3

4

5

6

7

8

9

10

11

12

   // 直接写上跳转的地址

  <router-link to="/detail/one">

    <span class="spanfour" >link跳转</span>

  </router-link>

  // 添加参数

  <router-link :to="{path:'/detail/two', query:{id:1,name:'vue'}}">

   </router-link>

  // 参数获取

  id = this.$route.query.id

  // 新窗口打开

  <router-link :to="{path:'/detail/three', query:{id:1,name:'vue'}}" target="_blank">

  </router-link>

this.$router.push/replace跳转 

toDeail (e) { this.$router.push({path: "/detail", query: {id: e}}) } // 参数获取 id = this.$route.query.id toDeail (e) { this.$router.push({name: "/detail", params: {id: e}}) } // 注意地址需写在 name后面 //参数获取,params和query区别,query参数在地址栏显示,params的参数不在地址栏显示 id = this.$route.params.id

 resolve跳转

//resolve页面跳转可用新页面打开 //2.1.0版本后,使用路由对象的resolve方法解析路由,可以得到location、router、href等目标路由的信息。得到href就可以使用window.open开新窗口了 toDeail (e) { const new = this.$router.resolve({name: '/detail', params: {id: e}}) window.open(new.href,'_blank') }

 window.open()

1. 在当前窗口打开百度,并且使URL地址出现在搜索栏中.

1

2

window.open("http://www.baidu.com/", "_search");

window.open("http://www.baidu.com/", "_self");

2. 在一个新的窗口打开百度

1

window.open("http://www.baidu.com/", "_blank");

3. 打开一个新的窗口,并命名为"hello"

1

window.open("", "hello");

另外, open函数的第二个参数还有几种选择:

_top : 如果页面上有framesets,则url会取代framesets的最顶层, 即, 如果没有framesets, 则效果等同于_self._parent:url所指向的页面加载到当前frame的父亲, 如果没有则效果等同于_self._media : url所指向的页面加载到Media Bar所包含的HTML代码区域中.如果没有Media Bar则加到本身.

如果还要添加其它的东西在新的窗口上, 则需要第三个参数:

channelmode : yes|no|1|0  (窗口显示为剧场模式[全屏幕显示当前网页, 包括工具栏等],或频道模式[一般显示]).directories :  yes|no|1|0 (是否添加目录按钮, 比如在IE下可能会有一个"链接"这样的按钮在最上面出现)fullscreen : yes|no|1|0 (使浏览器处理全屏幕模式, 并隐藏标题栏和菜单等)menubar : yes|no|1|0 (是否显示浏览器默认的菜单栏)resizeable : yes|no|1|0 (窗口是否可调整大小)scrollbars : yes|no|1|0 (是否允许水平或垂直滑动条)titlebar : yes|no|1|0 (是否添加一个标题栏)toolbar : yes|no|1|0 (是否添加浏览器默认的工具栏)status : yes|no|1|0 (是否显示状态栏)location : yes|no|1|0  (是否显示搜索栏)copyhistory :  yes|no|1|0 (似乎已经废弃, 如果只要工具栏显示, 历史按钮就会显示出来)height : 窗口的高度, 最小值为100像素width :  窗口的宽度, 最小值为w100像素left : 窗口的最左边相对于屏幕的距离
本文链接地址:https://www.jiuchutong.com/zhishi/289809.html 转载请保留说明!

上一篇:[已解决|多种方案]Error: Rule can only have one resource source (provided resource and test + include + excl(有多种解决方法的问题)

下一篇:vue-router路由跳转与打开新窗口(vue路由跳转原理)

  • 苹果的白色浮球在哪设置(苹果的白色浮球叫什么)

    苹果的白色浮球在哪设置(苹果的白色浮球叫什么)

  • 华为mate30pro视频聊天如何开美颜

    华为mate30pro视频聊天如何开美颜

  • 华为手机视频通话怎么美颜

    华为手机视频通话怎么美颜

  • 拼多多为什么助力不成功(拼多多为什么助力还差更多了了,反而)

    拼多多为什么助力不成功(拼多多为什么助力还差更多了了,反而)

  • 双十一用的红包退款后怎么办(双十一用的红包 退货后能继续用吗)

    双十一用的红包退款后怎么办(双十一用的红包 退货后能继续用吗)

  • obs直播卡顿是什么问题(obs直播间很卡)

    obs直播卡顿是什么问题(obs直播间很卡)

  • 从手机号能查出什么信息呢(从手机号能查出抖音号吗)

    从手机号能查出什么信息呢(从手机号能查出抖音号吗)

  • 荣耀x10什么时候发行(荣耀X10什么时候可以升级鸿蒙3.0正式版)

    荣耀x10什么时候发行(荣耀X10什么时候可以升级鸿蒙3.0正式版)

  • 苹果退出登录是灰色的(苹果退出登录是红色但没有退出)

    苹果退出登录是灰色的(苹果退出登录是红色但没有退出)

  • 苹果手机在哪清理垃圾?(苹果手机在哪清除运行内存)

    苹果手机在哪清理垃圾?(苹果手机在哪清除运行内存)

  • mp4压缩文件到最小(mp4文件如何压缩到最小)

    mp4压缩文件到最小(mp4文件如何压缩到最小)

  • 小米手环久置怎么激活(小米手环久置怎么关机)

    小米手环久置怎么激活(小米手环久置怎么关机)

  • 苹果下不了软件怎么办(苹果下不了软件怎么办说微信余额不足)

    苹果下不了软件怎么办(苹果下不了软件怎么办说微信余额不足)

  • 优酷怎么看什么时候到期(优酷怎么看什么时候充的会员)

    优酷怎么看什么时候到期(优酷怎么看什么时候充的会员)

  • word下划线长度固定(word下划线长度设置)

    word下划线长度固定(word下划线长度设置)

  • word字间距设置(word字间距设置在哪里)

    word字间距设置(word字间距设置在哪里)

  • 华为nova5pro参数(华为nova5pro参数配置有红外线吗)

    华为nova5pro参数(华为nova5pro参数配置有红外线吗)

  • 华为手机锁屏时间在哪里设置(华为手机锁屏时显示步数在哪里设置)

    华为手机锁屏时间在哪里设置(华为手机锁屏时显示步数在哪里设置)

  • 苹果x怎么给软件加密(苹果x怎么给软件加密码锁)

    苹果x怎么给软件加密(苹果x怎么给软件加密码锁)

  • 怎么把两张照片重叠(怎么把两张照片拼接成一张)

    怎么把两张照片重叠(怎么把两张照片拼接成一张)

  • 陌陌怎么不能视频聊天了(陌陌怎么不能视频显示时间太短)

    陌陌怎么不能视频聊天了(陌陌怎么不能视频显示时间太短)

  • 小米9手机怎么放卡(小米9手机怎么拆开后盖视频)

    小米9手机怎么放卡(小米9手机怎么拆开后盖视频)

  • 修改远程桌面端口号(修改远程桌面端口脚本)

    修改远程桌面端口号(修改远程桌面端口脚本)

  • 中科院ChatGPT Academic开源安装使用过程中的网络代理问题(中科院院士2023增选)

    中科院ChatGPT Academic开源安装使用过程中的网络代理问题(中科院院士2023增选)

  • 一般纳税人出租不动产增值税税率
  • 借款合同怎么做
  • 作废的发票要拿出来吗
  • 售后回租利息可以抵税吗
  • 前一年的未分配利润属于什么科目
  • 用友无法录入现金流量怎么处理
  • 扣缴义务人怎么删除
  • 企业将重组债务转为权益工具
  • 工伤职工应享有的待遇及救济途径
  • 合同印花税申报表怎么填写
  • 转让旧房增值税计税依据
  • 信用卡逾期滞纳金是按天还是按月计算
  • 报废车辆残值收入交多少增值税
  • 金税三期个人所得税怎么下载
  • 预缴的企业所得税可以扣除吗
  • 资产减值准备所得税申报中要填主表吗
  • 即征即退增值税政策
  • 风险纳税人原因查询
  • 营改增后,纳税人转让房地产
  • 一卡通充值计入什么费
  • 健身房会计一般做什么
  • 公司缴纳递延所得税吗
  • 交付使用资产科目核算
  • vue中的...
  • linux开启
  • 光纤测速网速测试
  • 商品换购是什么意思
  • pqtray.exe - pqtray 是什么进程 有什么用
  • php中的require
  • 银行复利息合法吗?
  • 会计分录的书写规范
  • js日期字符串转换为指定格式的日期
  • 普通发票主营业务怎么填
  • 梵净山原名
  • vue项目引入axios
  • 大数据项目之数据采集
  • 季度申报残保金怎么计算
  • 行人检测技术
  • 微软回应
  • 模型参数是什么意思
  • PHP HTTP 认证实例详解
  • php图片添加水印的方法
  • 登记银行存款日记账的凭证有哪些
  • php怎么关闭
  • 动产什么时候取得所有权
  • 小规模纳税人代销商品增值税如何计算
  • 个税算错怎么办理退税
  • sql2008怎么查询
  • 政府补助确认递延所得税负债
  • 个人所得税如何缴纳
  • 记账软件多少钱一套
  • 受托加工的成本
  • 计提工资时个税挂其他应收款
  • 什么服务费发票可以免税的
  • 企业坏账准备提取的方法和提取的比例由国家统一规定
  • 微信和支付宝的区别
  • 原始凭证丢了判刑吗
  • sql server数据导入导出的特点
  • win8.1官方
  • Windows Server 2008的NPS策略应用
  • 重装windows764 位后后如何将apache mysql加入系统服务
  • winkey.exe - winkey是什么进程
  • qt渲染机制
  • appiumforwindows的简单安装和启动(安卓)
  • 直接利用外资
  • 每次开机windows桌面更新
  • nodejs实战教程
  • 如何使用jquery实现点击按钮弹出一个对话框
  • js获取当前点击事件的节点
  • 置顶聊天折叠怎么开启
  • Python调用大漠插件
  • javascript playground
  • Android开发中的几种管理机制的使用场景是什么
  • js操作dom节点的方法
  • 工会经费税务代收现状
  • 联华超市华联超市哪个厉害
  • 湖北国税发票真伪查询
  • 电子税务局无法导出申报表
  • 建筑企业异地预缴增值税计算
  • 遵从和尊重
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设