没事就需要翻翻vue官网，好长时间不看了。也不知道是她变心了，还是自己把她忘记了。
常用的传递方式
直接传（拼接）
//组件调用
this.$router.push({path: `/describe/${id}`})
//路由配置
{
path: '/describe/:id',
name: 'Describe',
component: Describe
}
//Describe组件获取
this.$route.query.id
query传参
传递的参数会拼接在url上
//组件调用
this.$router.push({
path: '/describe',
query: {
id: id
}
})
//路由配置
{
path: '/describe',
name: 'Describe',
component: Describe
}
//Describe组件获取
this.$route.query.id
（注：以上两种方式都会把参数放置在 this.$route.query 中）
params传参
（注：这里的路由匹配方式：通过路由属性中的name来确定匹配的路由。如果提供了 path，params 会被忽略）
params传参不会拼接在url上，但存在一个问题-------如果强制刷新页面会丢失参数
//组件调用
this.$router.push({
name: 'Describe',
params: {
id: id
}
})
//路由配置
{
path: '/describe',
name: 'Describe',
component: Describe
}
//Describe组件获用
this.$route.params.id
新发现
现在的路由传参的方式没有改变，上述内容依然有效。组件内获取的方式增加了props方式接收，可以把参数传到props里了，功能更强大了。
如果在组件内要用props接收路由上的参数可以分为三种方式
布尔模式
如果 props 被设置为 true，route.params将会被设置为组件属性。（设置为组件属性。不设置props时，没有理解不知道怎么访问）
//组件调用
//路由传递方式只能使用params传递参数
this.$router.push(
name: 'Describe',
params: {
id: id
}
})
//路由配置
{
path: '/describe',
name: 'Describe',
component: Describe,
props: ture
}
//组件获取
const Describe= {
props: ['id'],
template: '<div>User {{ id }}</div>'
}
对象模式
如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。
// 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
//组件配置
{
path: '/describe/:id',
components: { default: Describe, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
//单文件组件在props中获取
const Describe= {
props: ['id'],
template: '<div>describe{{ id }}</div>'
}
//方式二 (这里需要注意如果在props中声明了id，这里方式获取会报undefined。)
this.$attrs['id']
函数模式
你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等URL /describe?q=vue 会将 {query: 'vue'} 作为属性传递给 describe组件。
//组件调用（这里只能把参数放置在query中）
this.$router.push({
path: '/describe',
query: {
id: id
}
})
//路由设置
{
path: '/describe',
component: describe,
props: (route) => ({ name: route.query.name})
}
//组价获取
//方式一
props:{
name:''
}
this.name
//方式二 (这里需要注意如果在props中声明了name，这里方式获取会报undefined。)
this.$attrs['name']
总结
布尔模式需要用命名路由访问并把参数放置在params中，否则接收不到。
对象路由需要使用path拼接或者放置在query中，否则接收不到。
对象路由静态参数无所谓。
对象模式和函数模式返回的都是一个对象，如果在props中接收则直接thi.key访问。若没有在props中接收则通过this.$attre.key访问
附：(vue 官网）
vm.$attrs
2.4.0 新增
类型：{ [key: string]: string }
只读
详细：
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。
当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class和 style 除外)，
并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
