vue路由跳转,父子组件,axios传值

梦さん

已于 2025-02-27 09:52:06 修改

阅读量427

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

于 2022-07-17 19:43:26 首次发布

本文链接：https://blog.csdn.net/qq_45041558/article/details/125835922

本文介绍了在Vue.js中使用$router进行参数传递的两种方式：params和query。params通过name属性传递参数，不显示在URL，但刷新后参数会丢失；query通过path或name传递，参数显示在URL，刷新后仍保留。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

NO1.$router使用params来传递参数

在传值页面的写法

//用这种方法传参，必须这么些，不能写path,
//否则你在取参数的时候this.$router.params.userId就是undefined
//.这是因为，params只能用name来引入路由

this.$router.push({
    name:"'Message'",//这个name就是你刚刚配置在router里边的name
    params:{
          userId:"10011"
    }
})

在取值页面的写法

this.$route.params.userId

NO2.$router使用query来传递参数

传值

this.$router.push({
    path:"/login",//这个path就是你在router/index.js里边配置的路径
    query:{
          userId:"10011"
    }
})

取值

this.$route.query.userId

两者的区别

query可以通过name属性或者path属性来引入路由，而params只能通过name属性来引入路由；在使用params传递时如果指定了path属性而没有name属性，那么界面能成功跳转但是不能接受到传递过来的参数
query传递参数时会地址栏会发生改变，传递参数会携带在路径中，而params则不会
在刷新界面时，query传递的参数不会丢失，而params会丢失

*.参数传递不同页面的传递

一  路由path query传值
(1)发 :
跳转方法(){
  this.$router.push({path: '/taskSecondAllot',query:{name:'张三',...record,taskId:record.taskId}});
}
(2)接 : 生命周期函数钩子中获取
created(){
  console.log("跳转参数", this.$route.query);
}

二 路由 name params传值
(1)发 : 
跳转方法(){
  this.$router.push({name: `taskExecute`,params: record});
}
(2)接 : 
created(){
  this.routeParams = this.$route.params;
}

父子组件之间传值

一
(1)父组件 发 : 
<taskIndexCust :index="it" :indexid="it.pk.indexid" :taskid="fieldValue1.taskId"></taskIndexCust>
(2)子组件  接 :
export default {
  name: "indexUpload",
  props: {
    indexid: String,
    taskid: String,
    index: Object,
  },
  components: {
    
  },
  data() {
     return {
	...
     }
  }
}

二
子组件 发:
this.$emit('showCityName',data);
父组件 接:
<train-city @showCityName="updateCity"></train-city>
updateCity(data){
   console.log(data)
}

三

*父组件调用子组件方法/(获取/修改)参数
*父组件获取子组件的所有属性: (父组件里修改子组件的属性参数,父组件调用子组件的方法也可以使用)
父组件:
<JTXX ref="JTXXData"></JTXX>
方法(){
  this.$refs.JTXXData.name = "张三";
  this.$refs.JTXXData.age = "40";
  this data = this.$refs.JTXXData.add();//调用子组件方法,获取参数
}
子组件:
data(){
  return {
    name: "李四",
    age: "20"
  }
},
methods:{
  add(){
    var params = {
      name: '王二麻子',
    }
    return params;
  }
}

对象赋值 this.$set(item,'name',this.custid)
对象删除 this.$delete(item,'label')

this.$axios的使用(两种传参接收方式):

单个参数传参
前端:
let params = new FormData();
params.append("id",record.id)
this.$axios.post(url,params).then(res => {...
后端:
@RequestParam(name = "id")

对象参数传参
前端:
let params = {
  name: 'xxx',
  age: 12,
  sex: 0
}
this.$axios.post(url,params).then(res => {...
后端:
@RequestBody User user

*方法里只有一个参数的时候可以这样写:
@click = “()=>{ addFlag = true }”

*重置表单
this.queryField = this.$options.data().queryField;

json 转 对象
JSONObject.parseObject(logEntity.getAfterData(),IecTermLogVo.class)