vue 向路由组件传递数据

一、使用的方法和组件：

1、 当前路由

2、{{message.title}} 路由跳转的路劲

3、setTimeout 延时获取

4、mounted 只获取一次

5、watch 监视

6、find（）寻找方法 返回的是true和false

二、实例代码

MessageDetil.vue

   

      ID {{$route.params.id}}

   

      title:{{msg.title}}

   

      content:{{msg.content}}

  const messageDetails = [

{

id:1,

      title:'message01',

      content:'n1'

    },

    {

id:2,

      title:'message01',

      content:'n2'

    },

    {

id:3,

      title:'message01',

      content:'n3'

    }

]

export default {

name:'MessageDetil',

    data () {

return {

msg: {}

}

},

    mounted () {

const id =this.$route.params.id

      this.msg = messageDetails.find(msg => msg.id === id *1)

},

    watch: {

$route:function () {

const id =this.$route.params.id

        this.msg = messageDetails.find(msg => msg.id === id *1)

}

}

}