params参数
属于路径的一部分,需要占位(router——index.js文件夹)
{
name:'hello', //命名路由
path:'detile/:id/:title', // :id/:title表示占位
component:Detile
}
在 detile.vue 组件中:
<span>id是:{{$router.params.id}}</span>
<span>title是:{{$router.params.title}}</span>
在 message.vue 组件中:
<!-- 路由的params参数:需要占位 -->
<router-link :to="{
name:'hello', //命名路由 同于 path:'/home/message/detile'
params:{
id:item.id,
title:item.title
}
}">
{{item.title}}
</router-link>
query参数(有两种书写形式)
不属于路径的一部分,不需要占位
在 detile.vue 组件中:
<span>id是:{{$route.query.id}}</span> <br>
<span>title是:{{$route.query.title}}</span>
在 message.vue 组件中:
way1:
<router-link :to="{
name:'hello',
query:{
id:item.id,
title:item.title
}
}">
{{item.title}}
</router-link>
way2:
<router-link :to="`/home/message/detile?id=${item.id}&title=${item.title}`">
{{item.title}}
</router-link>