vue路由参数传递问题

最新推荐文章于 2024-01-26 16:01:22 发布

SmYoki_017

最新推荐文章于 2024-01-26 16:01:22 发布

阅读量198

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/JINX017/article/details/129483990

版权

文章详细介绍了在Vue.js中通过字符串、模板字符串和对象三种方式传递路由参数，包括params和query的使用。并讨论了如何处理params参数可传可不传的情况，以及在组件间通过props传递数据的方法。

摘要由CSDN通过智能技术生成

路由传递参数

第一种：字符串形式

this.$router.push("/search/"+this.keyword+"?k="+ this.keyword.toUpperCase());

第二种:模板字符串

this.$router.push(`/search/+${this.keyword}+?k=+${this.keyword.toUpperCase()}`);

第三种:对象(最常用)

this.$router.push({
 name:"search",
  params:{
   keyword:this.keyword
  },
  query:{
     k:this.keyword.toUpperCase()
  }
})

同时使用query和params传递参数的route配置

      {
      path:"/search/:keyword?"   //:是params的占位符,query参数会加在?后面
      }

如何指定params参数可传可不传

在路由配置文件这样写

  {
      path:"/search/:keyword"   //:是params的占位符
  }

而在路由跳转是并没有携带parms参数，而是携带了query参数

你会发现URL有问题,路由中的search不见了，而query参数成功携带了过来

解决方法，配置路由后面加个？代表params参数可传可不传

  {
      path:"/search/:keyword?"   //:是params的占位符
  }

当params可传可不传时，如果传递的是空串时

你会发现URL有问题,路由中的search不见了，而query参数成功携带了过来

用undefined解决

this.$router.push({
   name:'search',
   params:{
     keyword:''||undefinded
   },
   query:{
     K:this.keyword
   }
})

路由组件也可传递props数据

 // 布尔值写法(只能传递params)
  props:true,
 // 对象写法:额外的给路由组件传递一些props
  props:{a:1,b:2}
 // 函数写法:可以params参数，query参数，通过props传递给路由组件
 props:($route)=>({keyword:$route.params.keyword,k:$route.query.k})