route.js

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            name:'guanyu',
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news',
                    component:News,
                },
                {
                    path:'message',
                    component:Message,
                    children:[
                        {
                            name:'xiangqing',
                            path:'detail/:id/:title',
                            component:Detail,
                            //props的第一种写法 值为对象 所有的key-value都会以props的形式传给Detai组件
                            /*props:{
                                a:1,
                                b:'hello'
                            }*/
                            //props的第二种写法 值为布尔值. 为真就会把组件收到的所有params参数以props形式传给Detail组件
                            //props:true
                            //props的第三种写法 值为函数
                            /*props($route){
                                return {id:route.params.id,title:route.params.title}
                            }*/
　　　　　　　　　　　　　　　　　//如果用的query传参，props里为query
　　　　　　　　　　　　　　　　　//解构赋值法
                            props({params}){
                                return {id:params.id,title:params.title}
                            }
                        }
                    ]
                }
            ]
        }
    ]
})

detail.vue

<template>
    <ul>
        <li>消息编号：{{id}}</li>
        <li>消息标题：{{title}}</li>
    </ul>
</template>

<script>
//用props接收

    export default {
        name:'Detail',
        props:['id','title'],
        mounted() {
            console.log(this.$route)
        },
    }
</script>