vue-router(向路由組件傳遞數據)

Message 下 建立一個 MessageDeatil 組件

方式一：路由路徑攜帶參數（param/query）

① 配置路由

② 路由鏈接

③ 路由組件中讀取路由鏈接中攜帶的參數，$route 中

MessageDetail

<template>
  <div>
    <ul>
      <li v-for="message in messages" :key="message.id">
        <!-- <a href="#">{{message.title}}</a> -->
        <router-link :to="`/home/message/messageDetail/${message.id}`">{{message.title}}</router-link>
      </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [
        { id: 1, title: "Message001" },
        { id: 2, title: "Message002" },
        { id: 3, title: "Message003" },
      ],
    };
  },
};
</script>

<style>
</style>

 方式二：<router-vew></router-view> 屬性攜帶數據

如將 msg="hello" 從 Message 傳到 MessageDetail 中