vue 带参数跳转_vue跳转页面的几种方法

vue 带参数跳转_vue跳转页面的几种方法vue2.0在使用的过程中,.vue文件之间的跳转,在template中的常见写法是:<router-linkto="/miniCard/statement/horizon"><buttonclass="btnbtn-defaultcolorDe">继续</button>&l

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

1.页面跳转的两种方法

// 1.使用path跳转
  pathTo () { 
   
      this.$router.push({ 
   
          path: '/b'
      })
  },
  // 2.使用name跳转
  nameTo () { 
   
      this.$router.push({ 
   
          name: 'b'
      })
  }

Jetbrains全家桶1年46,售后保障稳定

2.页面传参以及获取

// 使用path跳转,使用query传参,参数会拼接到url里面。缺点是刷新页面参数会丢失。b页面通过 this.$route.query 获取
   pathTo () { 
   
       this.$router.push({ 
   
           path: '/b',
           query: { 
   
               b: 'a页面的参数'
           }
       })
   },
   /* 使用name跳转,可以使用两种方式传参。 * 1.使用query传参,参数会拼接到url里面。缺点是刷新页面参数会丢失。b页面通过 this.$route.query 获取 * 2.params,b页面通过 this.$route.params 获取。类似于post传参,参数不会丢失 * */ 
   nameTo () { 
   
       this.$router.push({ 
   
           name: 'b',
           params: { 
   
               a: 'a页面的参数'
           },
           query: { 
   
               b: 'a页面的参数'
           }
       })
   }
  

在这里插入图片描述

// 使用path跳转,通过占位符形式,将参数拼接到路由里面,需提前在route里面定义,如上图。b页面通过 this.$route.query 获取,刷新页面参数不会丢失
   pathTo () { 
   
       this.$router.push({ 
   
           path: '/b/11'
       })
   }
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/215463.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • c语言三目运算符例子_单目运算符与双目运算符

    c语言三目运算符例子_单目运算符与双目运算符1.运算方向从左往右,从右往左结合,只有一个表达式被计算百度百科:三目运算符,又称条件运算符,是计算机语言(c,c++,java等)的重要组成部分。它是唯一有3个操作数的运算符,所以有时又称为三元运算符。一般来说,三目运算符的结合性是右结合的。对于条件表达式b?x:y,先计算条件b,然后进行判断。如果b的值为true,计算x的值,运算结果为x的值;否则,计算y的值,运算结果为y的值…

    2022年9月28日
    0
  • 验证码的原理、作用及实现「建议收藏」

    验证码的原理、作用及实现「建议收藏」验证码能有效阻止恶意登录与注册,这里主要是验证码的相关原理及操作实现。所用知识为javaweb的jspservletxml及java基础知识。

    2022年7月14日
    21
  • vue跨域解决的几种方案「建议收藏」

    vue跨域解决的几种方案「建议收藏」vue跨域解决的几种方案一、开发环境解决跨域方法平时使用vue开发的时候,大多会使用vue-cli搭建项目,在vue-cli搭建的项目中有一个配置文件vue.config.js,可以在该文件中进行相应的配置解决开发环境的跨域问题。第一步设置公共urlapi/index.jsimportaxiosfrom’axios’importrouterfrom’@/router/index.js’importstorefrom’@/store/index.js’//创建一个axios

    2022年10月1日
    0
  • Generic Host Process for Win32 Services 错误

    Generic Host Process for Win32 Services 错误机器运行时防火墙一直提示“GenericHostProcessforWin32Services”访问网络,选阻止后系统就一直弹出一个GenericHostProcessforWin32Services遇到问题需要关闭的对话框!在资源管理器中把系统文件的隐藏属性打开后,发现每个盘的根目录下和C:/WINDOWS目录下都有一个gg.exe文件,每个盘的根目录下有一个autoru

    2022年10月12日
    0
  • 特殊符号心形_wps中斜杠怎么做

    特殊符号心形_wps中斜杠怎么做加帽子符号latex中如果想在字母上加上一个帽子(尖角)符号应该怎样表达呢?(1)如果是在正文中,例如用\^{Z}即可;(2)如果是在公式中,例如用\hat{Z}即可。加横线和波浪线加^号输入\hat 或\widehat加横线输入\overline加波浪线输入\widetilde加一个点\dot{要加点的字母}加两个点\ddot{要加点的字母}其…

    2022年10月28日
    0
  • tomcat8日志乱码_linux打开文件乱码

    tomcat8日志乱码_linux打开文件乱码linux中,启动tomcat,日志乱码。

    2022年9月26日
    0

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号