方式 1: 路由路径携带参数(param/query)
请求参数的方式:
- params是:
- query是?
index:
{
path:'/home/messages',//另一种写法
component:Messages,
children:[
{
path:'/home/messages/MessageDetail/:id',//占位符,动态组件,param参数
//path:'/home/messages/MessageDetail',//占位符,动态组件,query参数
component:MessageDetail
}
]
},
Messages.vue:
<div>
<ul>
<li v-for="(message,index) in messages" :key="message.id">
<router-link :to="`/home/messages/MessageDetail/${message.id}`">{{message.title}}</router-link>
//字符串的模板语法${message.id}
//query写法:
<!-- <router-link :to="`/home/messages/MessageDetail?id=${message.id}`">{{message.title}}</router-link>-->
</li>
</ul>
<router-view></router-view>
</div>
Message中的router-link中to的路径确定了地址路径,把id传给了index中路由path的:id,然后再给到了MessageDetail中,通过路径$route.params.id来查找当前路由的id一致的对象
MessageDetail.vue
<template>
<div>
<p>ID:{{$route.params.id}}</p>
<ul>
<li>id:{{detail.id}}</li>
<li>title:{{detail.title}}</li>
<li>content:{{detail.content}}</li>
</ul>
</div>
</template>
<script>
export default{
data() {
return {
detail:{
id:'',
title:'',
content:''
}
}
},
mounted() {// 改变当前路由组件参数数据时, 不会重新创建组件对象, mounted不会重新执行
setTimeout(() => {
const messageDetails = [
{id: 1, title: 'Message001', content: 'message content00111....'},
{id: 2, title: 'Message003', content: 'message content00222....'},
{id: 4, title: 'Message005', content: 'message content00333....'}
]
this.messageDetails=messageDetails
const id=this.$route.params.id*1//这里id可能是一个文本,所以*1可能会是NaN
this.detail=messageDetails.find(mdetail => mdetail.id===id)
//mdetail是messageDetails数组中的每一个对象
//查找messageDetails中id和路由路径参数param传过来id一致的对象
},1000)
},
watch:{//监视变化,点击不同的链接就会传递不同的$route
$route:function(value){//路由路径(param)发生了改变,改变当前路由组件参数数据时自动调用
const id=value.params.id*1//value是$route的值
this.detail=this.messageDetails.find(mdetail => mdetail.id===id)
}
}
}
</script>
方式 2: 属性携带数据
<router-view>
属性携带数据
<router-view :msg='msg'></router-view>
//这里加:表示msg是一个变量
和props传递数据一样
<router-view msg="abc"></router-view>
<template>
<div>
About
{{msg}}
</div>
</template>
<script>
export default{//向外默认暴露一个配置对象
props:{
msg:String
}
}
</script>
<style>
</style>
缓存路由组件
(1)默认情况下,被切换的路由组件对象会死亡释放,再次回来时是重新创建的。
(2)如果可以缓存路由组件,可以提高用户体验
编码实现:缓存的是组件对象
<keep-alive>
<router-view>
</router-view>
</keep-alive>