在组件中使用$route
会使组件与路由形成高度耦合
例如:
<template>
<ul>
<li>消息编号:{{$route.params.id}}</li>
<li>消息编号:{{$route.params.title}}</li>
<li>消息编号:{{$route.params.id}}</li>
<li>消息编号:{{$route.params.title}}</li>
...
</ul>
</template>
使用props
将组件和路由解耦,并且可以让组件更方便地收到参数
第一种写法:
props
值为对象
该对象中所有的key-value对
都会通过props
传给Home
组件
但不常用,因为传递的是死数据
{
path: 'home/:id',
component: Home,
props: {
id: 123,
title: '你好'
}
}
第二种写法:
props
值为布尔值
布尔值
为true
,则把路由收到的所有params
参数通过props
传给Home
组件
不会理会query
参数
{
path: 'home/:id',
component: Home,
props: true
}
第三种写法:
props
值为函数
该函数返回的对象
中的每一组key-value
都会通过props
传给Home
组件
{
path: 'home/:id',
component: Home,
props(route) {
return {
id: route.query.id,
title: route.query.title
}
}
// 写成箭头函数的形式也可以
props: route => ({
id: route.query.id,
title: route.query.title
})
}
在Home.vue
组件中接收
props:['id','title']