路由传参的几种方式

一、路由是什么

路由传参是指在前端路由中通过URL传递参数的方式，用于在不同页面之间传递数据和状态信息。

二、路由跳转的2种方式

①声明式导航：通过router-link实现(必须要有to属性)，实现路由跳转
②编程式导航：利用的是组件实例的$router.push或$router.replace方法，实现路由的跳转，同时也可在里面书写一些其他业务，比如路由传参

三、路由传参的3种写法

params传参：属于路径当中的一部分，在配置路由的时候需要占位
query传参：不属于路径当中的一部分，比如/home?k=v&k=v，不需要占位
props传参：路由组件传参(有三种方式)

3.1、params和query传参的实现步骤

需求：收集输入框数据，在点击搜索按钮时，将收集到的数据在路由跳转时传给Search页面

第一步：收集表单数据

<input type="text" v-model="keyword" />

export default {
  data() {
    return {
      keyword:''
    }
  },
   methods: {
    goSearch(){
      this.$router.push('/search')
    }
  },
}

第二步：配置路由

子组件路由占位，配置好参数-->:keyword(参数需要用冒号：表示)
{ path: '/search/:keyword', component: Search }

第三步：路由跳转(3种形式)

⭐第一种：字符串形式

父组件编程式传参
goSearch(){            
this.$router.push('/search/'+this.keyword+'?k='+this.keyword.toUpperCase())
}

⭐第二种：模板字符串

父组件编程式传参
goSearch(){  
this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`)
}

⭐第三种：对象形式(比较常用)

需要先给search路由起个名字 name:"search"，不能用path路由形式
{ path: '/search/:keyword', component: Search,name:'search' }

父组件编程式传参
goSearch(){  
this.$router.push({
name:'search',
params:{keyword:this.keyword},
query:{k:this.keyword.toUpperCase()}
})}

3.2、props传参实现步骤(三种形式)

⭐第一种：布尔模式【只能传递params参数】

可以把params作为路由组件的属性
{ path: '/search', component: Search, props: true }
并在search组件中传入props数据
props：['keyword']

⭐第二种：对象形式

{ path: '/search', component: Search, props: {a:1,b:2} }
并在search组件中传入props数据
props：['a','b']

⭐第三种：函数形式

{ path: '/search', component: Search, props: route => ({keyword:route.params.keyword, k: route.query.k })}
并在search组件中传入props数据
props：['keyword','k']

四、路由传参常见问题分析

问题1：路由传递参数（对象写法）path是否可以结合params参数一起使用吗?👇==不能

path结合params参数错误写法
this.$router.push({
        path:'/search',
        params:{keyword:this.keyword},
        query:{k:this.keyword.toUpperCase()}
      })

以上写法是错误的，会报以下错误，且路径中也不会出现params参数；

所以path这种写法不能与params参数一起使用，可以和name一起使用

问题2：如何指定params参数可传可不传？

首先params路由是需要占位，前面用了keyword进行了占位，此时路由是要求params传参的，如果没有传，URL地址便会有问题，地址中没有跳转到search这一路径也就不会出现search

已传参和未传参的2种URL对比：

已传参--->http://.../#/search/fff?k=FFF
未传参--->http://.../#/?k=FFF

解决2：params参数可以传递、或者不传递，但是如果传递是空串，如何解决？

在配置路由的时候，在占位的后面加上一个问号？，表示params可传或者不可传递

{ path: '/search/:keyword?', component: Search,name:'search' }
此时路径是正确的：http://.../#/search?k=FFF

问题3：params参数可以传递也可以不传递，但是如果传递是空串，如何解决？

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

如果传递是空串，URL地址会有问题，地址中没有跳转到search这一路径👇
http://.../#/?k=FFF

解决3：使用undefined解决，params参数可传或不传

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

此时路径正常，包含search--->http://.../#/search?k=FFF

最后：👏👏😊😊😊👍👍