query 方式
请求头中是http://localhost:8080/#/demo/news/content?id=3&title=电影这种带有？的形式。
:to=" ":表示to属性里边是表达式
query：属性用作传参
<router-link :to="{
name:'content', //
query :{
id: n.id,
title: n.title
}
}">
{
{
n.title }}
</router-link>
在浏览器中的开发者工具中可以看到这里是有参数了
我们用this.$route.query就可以取对象中的属性了
params
请求头中是http://localhost:8080/#/demo/news/content/1/电影。
- router.js中修改跳转路径
- 接收参数是用
params属性
<router-link :to="{
name:'content',
params:{
id: n.id,
title: n.title
}
}">
{
{
n.title }}
</router-link>
在浏览器中的开发者工具中可以看到这里是有参数了
我们用this.$route.params就可以取对象中的属性了
params
// 第一种写法：值为对象，该对象的所有key-value都会以props的形式传给组件
// props:{
// id:1,title:'标题'
// }
// 第二种写法：值为布尔值，当值为true的时候，就会把该组件收到的全部params参数，以props的形式传给该组件
// 但是这种写法并不能解决query的参数接收
// props:true,
// 第三种写法，值为函数
// props($route){
// return {
id:$route.query.id,title:$route.query.title}
// return {
id:$route.params.id,title:$route.params.title}
//