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查询其他参数值

vue路由学习-向路由组件传递数据_第1张图片

用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表示字符串

你可能感兴趣的:(vue)