首页 > 其他分享 >vue router页面跳转及传参、Vue获取用户输入到页面的数据在另一个页面使用

vue router页面跳转及传参、Vue获取用户输入到页面的数据在另一个页面使用

时间:2023-09-13 10:00:37浏览次数:43  
标签:传参 home params 跳转 router query id 页面


 vue router页面跳转及传参?

一、 router-link跳转

### 1.不带参数,name,path都行, 建议用name 
<router-link :to="{name:'home'}"> 
<router-link :to="{path:'/home'}">
 
###2.带params参数
<router-link :to="{name:'home', params: {id:10001}}"> 
 
###3.带query参数
<router-link :to="{name:'home', query: {id:10001}}">

二、this.$router.push()

### 1.不带参数
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})

### 2. query传参 
this.$router.push({name:'home',query: {id:'10001'}})
this.$router.push({path:'/home',query: {id:'10001'}})
 
### 3.params传参
this.$router.push({name:'home',params: {id:'10001'}}) // 只能用 name

三、 this.$router.replace()

###1. 不带参数
this.$router.replace('/home')
this.$router.replace({name:'home'})
this.$router.replace({path:'/home'})
 
###2. query传参 
this.$router.replace({name:'home',query: {id:'10001'}})
this.$router.replace({path:'/home',query: {id:'10001'}})
 
###3. params传参
this.$router.replace({name:'home',params: {id:'10001'}}) // 只能用 name

四、注意 query 和 params 之间的区别,灵活使用

* query:类似get

      1. 跳转后参数会拼接在url后面,不安全 密码之类还是用params;
      2. query刷新页面id还在;
      3. query中 html 取参:$route.query.id
      4. query中 script 取参:this.$route.query.id

* params:类似post

      1. 跳转之后页面url后面不会拼接参数, 但是刷新页面id会消失。
      2. 不配置path ,第一次可请求,刷新页面id会消失
      3. 配置path,刷新页面id会保留
      4. params 路由配置:path: "/home/:id" 或者 path: "/home:id" ,
      5. params中 html 取参:$route.params.id
      6. params中 script 取参:this.$route.params.id

场景一:把当前页面展示的数据在另一个页面使用

通过路由传参拿到跳转前页面数据并在页面使用传来的数据

使用场景:用户在充值页面输入的账号和充值金额,跳转到充值成功页面展示数据!

编辑

页面1:数据展示以及路由跳转传参

1. 数据渲染:
表具编号:<span>{{ numberForm.number }}</span>

2. data 里面定义数据:
return {
  numberForm: {
    number: "11111111",
  },
};

3. 方法里面通过路由传参把当前充值编号传到下个页面
methods: {
  biaojuchongzhi() {
    this.$router.push({
      name: "biaojuchongzhi",
      params: { number: this.numberForm.number },
    });
  },
},

页面2:接收页面1展示的已存在的数据

1. 数据渲染:v-model="chongzhiForm.money"

2. 接收页面 1 路由传过来的编号参数
data() {
  return {
    chongzhiForm: {
      number: this.$route.params.number,
      money: "",
    },
  };
},
3. 方法里面通过路由传参把当前充值·编号·和·金额·传到下个页面
methods: {
  onSubmit(values) {
    this.$router.push({
      name: "paysuccess",
      params: {
        number: this.chongzhiForm.number,
        money: this.chongzhiForm.money,
      },
    });
  },
},

页面3:接收页面1传入的编号数据 和 页面2传入的金额数据

1. 数据渲染:
表具编号:<span>{{number}}</span>
充值金额:<span class="bold">¥{{money}}</span>

2. 接收上个页面通过路由传来的数据:
data() {
  return {
    number: this.$route.params.number,
    money:  this.$route.params.money,
  };
},



标签:传参,home,params,跳转,router,query,id,页面
From: https://blog.51cto.com/u_15961699/7452010

相关文章

  • html 铆钉跳转指定元素 元素id
    目录html铆钉跳转指定元素元素idhtml铆钉跳转指定元素元素id标识该元素的唯一身份,并且可以在其他地方引用比如,通过a标题跳转到指定的位置:<p><ahref="#C4">查看章节4</a></p><h2>章节1</h2><p>这边显示该章节的内容……</p><h2>章节2</h2><p>这边显示该章节......
  • springBoot spring6 无法加载 thymeleaf的,在html页面中无法智能感知 th:这些
    网上所有的坑我都试过了,还是无法解决问题,@ControllerpublicclassSellController{@RequestMapping("/test01")/*@ResponseBody*/publicStringindex(){return"test01";}}”test01“下面永远是波浪线,无论把网上查出来的解决问题的方案我......
  • 互联网视频云平台EasyDSS视频服务器无法登录Web页面的排查与解决方法
    EasyDSS互联网视频云服务可支持视频直播、点播,视频直播方面最多可分为十六屏进行实时直播,视频点播方面则有视频点播广场自由点播,灵活性非常强,可满足用户的多场景需求。 我们接收到用户较多的咨询是关于EasyDSS服务运行之后,无法登录Web的情况(如下图)。 排查思路其实遇到这个......
  • C# 启动exe并传参
    方法一:入参格式为(exe路径+空格+传参),例如:stringexepath="E:\\呼叫端\\bin\\ces\\Debug\\呼叫器.exe123"; 若想在谷歌浏览器上打开某一个exe传参为:C:\Users\Administrator\Chrome\Application\chrome.exe  E:\\呼叫端\\bin\\ces\\Debug\\呼叫器.exe",若想在浏览器上执行exe并......
  • Vue2——监听页面滚动实现菜单和页面对应
    前言如题,监听页面的滚动并激活相应的菜单,一个老项目的维护,后面反正要全部重构,这里就先实现功能就好了;内容元素内容主要是添加相应的id,生成目录后直接通过锚点来跳转监听滚动window.addEventListener('scroll',()=>{constsections=document.getElementsByCla......
  • js实现页面打印功能实例代码(附去页眉页脚功能代码)
    <html><head></head><styletype="text/css"media="screen">@mediaprint{.print{display:block;}.notPrint{display:none;}}</style><scriptlanguage="javascript">functionprevi......
  • 过滤器:禁止浏览器缓存所有动态页面
    禁止浏览器缓存所有动态页面意味着阻止浏览器在访问网站上的动态生成内容时将这些内容存储在本地缓存中。动态页面通常是那些在每次加载时都会根据用户请求或其他因素而生成不同内容的页面,而不是静态页面,其内容在每次访问时都保持不变。禁止浏览器缓存动态页面可以确保用户在访问......
  • vue 页面导出为pdf与word
    vue页面导出为pdf与word一.导出为word 基于 docxtemplater 来导出word文档的方法1.安装引用依赖//安装docxtemplaternpminstalldocxtemplaterpizzip--save//安装jszip-utilsnpminstalljszip-utils--save//安装jszipnpminstalljszip--save//安装......
  • 使用Github Action在Github Pages上部署vue页面
    GithubAction部分:name:NodeJSon:push:branches:["master"]#SetspermissionsoftheGITHUB_TOKENtoallowdeploymenttoGitHubPagespermissions:contents:write#Allowonlyoneconcurrentdeployment,skippingrunsqueuedbetwee......
  • vue兄弟组件传参
    实现兄弟组件之间的参数传递可以通过以下方法:使用共同的父组件来传递参数。在父组件中定义一个数据属性,用于保存需要传递给兄弟组件的参数。Copyexportdefault{data(){return{message:'Hello',};},};在父组件的模板中引用两个兄弟组......