关于路由params传参一些问题的整理

params传参的写法

步骤1:定义路由规则

{ 
  path: "/find/:name", // path：路由地址
  component: Find // 展示Find这个组件
},

步骤2.传参,直接在路径后写要传入的参数

声明式导航写法：

<router-link to="/find/zs">张三详情</router-link>

编程式导航写法：

this.$router.push({
  name: 'name',
  params: { name: 'zs' }
})

步骤3:接收参数

<template>
  <div>
    <p>{{$route.params.name}}</p> //zs
  </div>
</template>

以上是路由params传参的基本用法，接下来我们来聊聊params使用的过程中可能会出现的一些问题。

问题1：路由跳转传参时，path写法可以和params同时使用么？

答：路由跳转传参时，path写法不能与params参数同时使用，因为如果同时使用控制台会报 NavigationDuplicated: Avoided redundant navigation to current location的错误 所以使用params传参只能使用name写法。

问题2：当路由规则中定义了占位符时，发生路由跳转可以不使用params传参么？

答：不可以，由于使用params传惨需要在路径上添加占位符，所以如果在路由跳转时没有携带参数时跳转后的路径会有问题，这时可以在路由规则中 在占位的后面加一个问号，即代表该参数可传可不传

{ 
  path: "/find/:name?", // path：路由地址
  component: Find // 展示Find这个组件
}

问题3:当使用params传递一个空字符串时会发生什么？

答：当使用params传递一个空字符串是，跳转后的路径也会有问题，这时可以使用短路运算，如果没有值则传入undefined

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

问题4:路由规则中可以传递 props么？

答：可以，总共有三种写法

第一种：布尔值写法

props:true

props值为布尔值，为true时，则把路由收到的所有params参数通过props传给组件

第二种：对象写法

props:{a:900}

props值为对象，该对象中所有的key-value的组合最终都会通过props传给组件

第三种：函数写法

	props($route){
		return {
			id: $route.query.id,
			title: $route.query.title
		}
	}

props值为函数，该函数返回的对象中每一组key-value都会通过props传给组件

使用时：

<template>
    <ul>
        <li>消息编号：{{ id }}</li>
        <li>消息标题：{{ title }}</li>
    </ul>
</template>

<script>
    export default {
        name:'Detail',
        props:['id','title']
    }
</script>