Vue的学习（14）向路由组件中传递数据

向路由组件中传递数据

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

基于昨天继续做，这里用param，param是：， query是？？

//index
{
          path:'messages',//简化写法
          component:Message,
          children: [
            {
              path:'/home/messages/detail/:id',//占位符
              component:MessageDetail
            }
          ]
        },

<template>
//Message
  <div>
    <ul>
      <li v-for="(message, index) in messages" :key="message.id">
        <router-link :to="`/home/messages/detail/${message.id}`">{{message.title}}</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

//MessageDetail
<template>
  <ul>
    <p>ID: {{$route.params.id}}</p>
    <li>id: {{messageDetail.id}}</li>
    <li>title: {{messageDetail.title}}</li>
    <li>content: {{messageDetail.content}}</li>
  </ul>
</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//这里担心id可能是个文本，字符*1是NaN
        //这里console.log了一下id的值，mounted只有在初始化的时候才执行一次
        //所以如果不加监视，始终显示的都是你点击的那个路由的信息，
        // 这个就执行一次，没有新生成路由，只有加了watch才可以是值对应变化，
        //说白了，就是虽然$route.params.id是变的，但是mounted不再执行了
        //加了watch  mounted这个也不执行了，剩下的都交给watch了，
        // 所以这就是为什么会有this.allMessageDetails =allMessageDetails这一步
        console.log(id)
        this.messageDetail = allMessageDetails.find(detail => detail.id==id)
      },1000)
    },
     watch:{
       $route:function (value) {//路由路径(param)发生了改变
         const id = value.params.id*1
         this.messageDetail = this.allMessageDetails.find(detail => detail.id==id)
       }
     }
  }
</script>

<style scoped>

</style>

方式 2: 属性携带数据
和props一样

 <router-view msg="abc"></router-view>

//About
<template>
  <div>
    <h2>About</h2>
    <br>
    <p>{{msg}}</p>
  </div>
</template>

<script>
  export default {
    props:{
      msg:String
    }
  }
</script>

<style scoped>

</style>

//这里给我的感觉就是Message中的router-link中to的id传给了index中路由path的：id，然后再给到了MessageDetail中的$route.params
注意：默认情况下, 被切换的路由组件对象会死亡释放, 再次回来时是重新创建的
补充：<keep-alive>缓存的是组件对象，