向路由组件传递数据--学习笔记

                                           向路由组件传递数据

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()方法；