位置: 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路由跳转原理)

  • 国家企业信用系统公司怎么查营业执照?

    国家企业信用系统公司怎么查营业执照?

  • steam怎么用余额买游戏(steam怎么余额退款到微信)

    steam怎么用余额买游戏(steam怎么余额退款到微信)

  • wifi密码被别人改了怎么办(WIFI密码被别人知道了怎么办)

    wifi密码被别人改了怎么办(WIFI密码被别人知道了怎么办)

  • uc网盘普通会员云收藏次数(uc网盘普通会员开通不了)

    uc网盘普通会员云收藏次数(uc网盘普通会员开通不了)

  • 筛选求和的函数(筛选求和的函数公式)

    筛选求和的函数(筛选求和的函数公式)

  • 电脑那个键盘切换中英文(电脑那个键盘切换拼音)

    电脑那个键盘切换中英文(电脑那个键盘切换拼音)

  • qq开启幸运字符对方知道吗(qq开启幸运字符saudade什么意思)

    qq开启幸运字符对方知道吗(qq开启幸运字符saudade什么意思)

  • medal00是什么手机型号(medal00是什么型号多少钱)

    medal00是什么手机型号(medal00是什么型号多少钱)

  • 腾讯课堂多久生成回放(腾讯课堂多久生成课件)

    腾讯课堂多久生成回放(腾讯课堂多久生成课件)

  • 抖音申请电脑直播需要多久(抖音申请电脑直播权限需要审核多久)

    抖音申请电脑直播需要多久(抖音申请电脑直播权限需要审核多久)

  • 打电话没有提示音就挂了(为什么手机关机了打电话没有提示)

    打电话没有提示音就挂了(为什么手机关机了打电话没有提示)

  • 贴了钢化膜触屏不灵敏怎么办(贴了钢化膜触屏不灵敏怎么办OPPO)

    贴了钢化膜触屏不灵敏怎么办(贴了钢化膜触屏不灵敏怎么办OPPO)

  • 微信运动时间截止时间(微信运动时间截止时间怎么设置)

    微信运动时间截止时间(微信运动时间截止时间怎么设置)

  • 京东秒杀是什么意思(京东 秒杀什么意思)

    京东秒杀是什么意思(京东 秒杀什么意思)

  • 看快手关注的人为什么看不到了(看快手关注人的动态对方会知道吗)

    看快手关注的人为什么看不到了(看快手关注人的动态对方会知道吗)

  • 快手怎么不能查找了(快手怎么不能查看别人的粉丝)

    快手怎么不能查找了(快手怎么不能查看别人的粉丝)

  • 高对比度文字啥意思(高对比度有什么好处)

    高对比度文字啥意思(高对比度有什么好处)

  • vivo隔空投送在哪(vivo隔空投送照片在哪里设置)

    vivo隔空投送在哪(vivo隔空投送照片在哪里设置)

  • 苹果8p日历怎么显示节假日(苹果8日历显示设置)

    苹果8p日历怎么显示节假日(苹果8日历显示设置)

  • 苹果耳机无线充电是什么(苹果耳机无线充电盒和有线充电盒区别)

    苹果耳机无线充电是什么(苹果耳机无线充电盒和有线充电盒区别)

  • 小米9喇叭只有一个响(小米9喇叭只有一个响另一个是干嘛用的)

    小米9喇叭只有一个响(小米9喇叭只有一个响另一个是干嘛用的)

  • 如何把应用安装到sd卡(如何把应用安装到外置储存卡)

    如何把应用安装到sd卡(如何把应用安装到外置储存卡)

  • 联通gprs是什么意思

    联通gprs是什么意思

  • 荣耀手机如何隐藏应用(荣耀手机如何隐藏app)

    荣耀手机如何隐藏应用(荣耀手机如何隐藏app)

  • Linux下NFS网络文件系统的基本使用教程(linux7 nfs)

    Linux下NFS网络文件系统的基本使用教程(linux7 nfs)

  • 详解Transformer中Self-Attention以及Multi-Head Attention(transformer for)

    详解Transformer中Self-Attention以及Multi-Head Attention(transformer for)

  • 冲回多计提费用
  • 对方给我开的增值税专票丢失
  • 个人所得税算错
  • 固定资产出售损益
  • 养殖企业如何做销售
  • 会计差错更正业务处理怎么操作?
  • 补偿金申报个所税如何录入?
  • 小规模增值税征收条件
  • 充值卡充值发票可以报销吗
  • 企业试生产期间发生的费用怎么入账
  • 上海个人住房房产税
  • 软件企业增值税即征即退会计处理
  • 孵化器 怎么赚钱
  • 采购商品产生的费用有哪些
  • 股东增资印花税税目
  • 公司汽车一年可以用多少油费
  • 无法收回的款项摘要怎么写
  • 公司注册资金抽逃
  • 政府授权国企为基建项目建设单位
  • 研发费用加计扣除优惠明细表
  • 在window系统中哪些用户可以查看日志
  • Windows10屏幕键盘在哪
  • windows 11 build 21996.1 dev
  • 企业清缴汇算
  • 小微企业应纳税所得额300万所得税
  • css案例教程
  • 深度测试软件
  • phpwebsocket框架
  • 学生誓词最新2022年
  • 手机做固定资产报废理由怎么写好
  • 增值税附加税减免政策2022年
  • 识别假人民币的简便方法
  • 股东可以领取工资吗
  • 物流货物丢失赔偿按照运费10倍
  • sql2008收缩日志文件
  • 电子承兑汇票支付信用查询
  • 无票收入不走对公账户
  • 小规模纳税人是什么意思
  • 哪些费用可以进研发费用
  • 对方公司倒闭应收账款,销售需要承担吗
  • 企业取得交易性金融资产的主要目的是
  • 委托代销商品的核算
  • 视同销售是按成本价入账还是按计税价格入账,为什么?
  • 出现销项负数
  • 财政总预算会计的主体是
  • 电信收据模板
  • 月末未完工半成品的分录
  • 会务费所需要注意的细节
  • 长期待摊费用怎么记账
  • mysql不能识别中文怎么解决
  • win10账户要求必须设置pin什么意思
  • WIN10开始菜单点击鼠标右键没反应的处理方法
  • 破解xp系统密码
  • Windows Server 2008网络中禁止迅雷下载
  • ubuntu /opt
  • vmp.exe是什么
  • 浏览器8系统怎么打不开主页
  • explore.exe进程占用cpu99%
  • windows以管理员权限打开文件
  • centos8安装锐速
  • Win10 Mobile 10586.36预览版怎么更新?
  • 如何解决在沟通中产生的漏斗效应
  • win10系统找不到无线网络连接
  • cocos2djs教程
  • opengl怎么用
  • android连接手机
  • 查找阴历日历
  • 零基础学JavaScript
  • javascript用户名验证
  • js动态创建script标签
  • javascript中checkbox使用方法实例演示
  • js的iframe
  • 用JObj实现的渐变效果
  • 无偿使用的房屋装修如何摊销
  • 煤炭资源税税率是多少啊
  • 电子税务局开的发票怎么作废
  • 合肥新房商铺
  • 江苏国税电子税务局官网
  • 农村房屋改造问题向谁举报
  • 国家税务总局制服
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设