向路由组件传递数据
1、实现案例
2、实现思路
(1)实现 基础路由案例 和 嵌套路由案例 前提下,链接如下:基础路由链接点击 和 嵌套路由案例链接点击 ;
(2)定义路由组件
(3)注册路由
(4)使用路由
3、实现过程
(1)按照“实现思路”中的第一步完成先;
(2)在目录src\views\Home下,定义一个vue组件 MessageDetail.vue,代码如下:
<template>
<div>
<p>ID: {{$route.params.id}}</p>
<ul>
<li>id: {{messageDetail.id}}</li>
<li>title: {{messageDetail.title}}</li>
<li>content: {{messageDetail.content}}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
messageDetail: {}
}
},
mounted() {
setTimeout(() => {
const allMessageDetails = [
{
id: 1,
title: "message001",
content: "message001 content......."
},
{
id: 3,
title: "message003",
content: "message003 content......."
},
{
id: 5,
title: "message005",
content: "message005 content......."
}
]
this.allMessageDetails = allMessageDetails
const id = this.$route.params.id * 1
this.messageDetail = allMessageDetails.find(detail => detail.id === id)
}, 1000)
},
/*
*(1)每加载一次路由,就只创建一次对象,就mounted()只加载一次。
*(2)由于每次点击不同的链接时,只是传递不同的参数,但是路由路径并没有变化,
* 解决该问题需要用到监听 watch()函数。
*/
watch: {
$route: function(value) {
//路由路径(param)发生了变化
const id = value.params.id * 1
this.messageDetail = this.allMessageDetails.find(
detail => detail.id === id
)
}
}
}
</script>
<style>
</style>
(3)注册路由
在文件src\router\index.js中,添加代码:
(4)使用路由
在文件src\views\Home\Message.vue中,添加代码:
<!-- 使用字符串拼接,用到反引号 -->
<router-link :to="`/home/message/detail/${message.id}`">{{message.title}}</router-link>
代码如下:
<template>
<div>
<ul>
<li v-for="(message, index) in messages" :key="index">
<!-- 使用字符串拼接,用到反引号 -->
<router-link :to="`/home/message/detail/${message.id}`">{{message.title}}</router-link>
</li>
</ul>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default {
data () {
return {
messages: []
}
},
mounted () {
//模拟ajax请求从后台获取数据
setTimeout(() => {
const messages = [
{
id: 1,
title: 'message001'
},
{
id: 3,
title: 'message003'
},
{
id: 5,
title: 'message005'
}
]
this.messages = messages
}, 1000)
}
}
</script>
<style>
</style>
(5)在终端运行命令 npm run dev , 开启访问即可
4、注意事项
(1)反引号的使用;
(2)$route的使用;
(3):id 作为占位符传参的使用;
(4)mounted()函数每次在组件加载时,只创建对象一次,该方法也就调用一次;如果需要监听多次调用该方法,需要使用
watch()方法;