作用：让路由组件更方便接收参数

当采用第2种方式时：注意路由格式path:'detail/:id/:title',

<template>

    <div><!--这个div不能少，不然build时会卡住-->

    <ul>

        <li>消息id:{{id}}</li>

        <li>消息标题:{{title}}</li>

    </ul>

    </div>

</template>

<script>

export default{

    name:'Detail',

    props:['id','title'],

    mounted(){

        console.log(this.$route)

    }

}

</script>

<style>

</style>

采用第三种方式时，注意路由格式query传参方式:?id=xx&title=yyy

路由配置：

                        {

                            name:'xiangqing',//路由命名

                            path:'detail',

                            component:Detail,

                            //props的第三种写法，值为函数

                            props($route){

                                return {

                                    id:$route.query.id,

                                    title:$route.query.title

                                }

                            }

                        }

跳转页面边接要用query传参

<!--query第三种写法:路由名称-->

            <router-link :to="{

                name:'xiangqing',//注意这里是name不是path

                query:{

                    id:m.id,

                    title:m.title

                }

            }">