2.vue中路由的使用——router
1.About.vue
2.Home.vue
3.Message.vue
4.News.vue
5.App.vue(父)
5.index.js
6.main.js
8.路由的例子
9.（上面例子说明了父子路由的说明，下面的包括爷子孙）
10.MessageDetail.vue
<template>
<div>
<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:'message——content…………'
},
{
id:2,
title:'message002',
content:'message——content…………'
},
{
id:3,
title:'message003',
content:'message——content…………'
}
]
//更新路由
this.allMessageDetails = allMessageDetails
//从路由取数据 并且放到id中
const id = this.$route.params.id*1
//
this.messageDetail = allMessageDetails.find(detail =>detail.id===id)
},1000)
},
//监听：路由变化，显示数据变化value最新的值
watch:{
$route:function(value){
const id = value.params.id*1
this.messageDetail = this.allMessageDetails.find(detail =>detail.id===id)
}
}
}
</script>
<style>
</style>