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

通常有两种写法：param与query

1. 定义路由组件（使用占位写法）

配置路由，设置参数（param/query）

children: [
            {
              path: '/home/solo/msgdetail/:id',
              component: MsgDetail
            }
          ]

':id’表示是params写法

router-link写法（es6） 使用写法

<router-link :to="`/home/solo/msgdetail/${solo.id}`">{{solo.name}}</router-link>

2. 根据id查询其他参数值

用devtools查询的id路径（请求参数）

const id = this.$route.params.id*1

*1是转换为数字

补充：mounted()在组件使用中值运行一次，可以利用watch去监视路由器的变化

mount()

mounted() {
      setTimeout(() => {
         const allMsgDetail = [
            {
              id: 1,
              name: 'Taeyoon',
              birthday: '1989/3/9'  
            },
            {
              id: 3,
              name: 'Somi',
              birthday: '2001/3/9'  
            },
            {
              id: 5,
              name: 'Jennie',
              birthday: '1996/1/16'  
            },
            {
              id: 9,
              name: 'hyuna',
              birthday: '1992/6/6'  
            }
          ]
        this.allMsgDetail = allMsgDetail
        const id = this.$route.params.id*1
        this.msgDetail = allMsgDetail.find(detail => detail.id===id)
      },1000)
    },

watch

watch: {
      $route: function(value){ //
        const id = value.params.id*1
        this.msgDetail = this.allMsgDetail.find(detail => detail.id===id)
      }
    },

补充：利用属性携带数据

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

：表示msg是变量，无：msg表示字符串