VUE-向路由组件传递数据

方式 1: 路由路径携带参数(param/query)

请求参数的方式：

1. params是：
2. 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>