index.js

import VueRouter from 'vue-router'

//引入组件

import About from '../components/117/About.vue'

import Home from '../components/117/Home.vue'

import News from '../components/117/News.vue'

import Message from '../components/117/Message.vue'

import Detail from '../components/117/Detail.vue'

//创建路由器

export default new VueRouter({

    /*

    注意这里是routes不是routers不要写错了,

    否则router-view会失效，且控制台会报No routes found in router

    */

    routes:[

        {

            path:'/about',//路由

            component:About,//组件名

        },

        {

            path:'/home',//路由

            component:Home,//组件名

            children:[

                {

                    path:'news',//对应home/news

                    component:News,

                },

                {

                    path:'message',

                    component:Message,

                    children:[

                        //query传参方式:?id=xx&title=yyy

                        // {

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

                        //     path:'detail',

                        //     component:Detail

                        // }

                        //params传参方式:id/xx/title/yyy

                        {

                            name:'xiangqing',//路由命名,params方式必须用name方式

                            path:'detail/:id/:title',

                            component:Detail

                        }

                    ]

                }

            ]

        },

    ]

})

传参：

<router-link :to="{

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

                params:{//这里是params不是query

                    id:m.id,

                    title:m.title

                }

            }">

                {{ m.title }}

            </router-link>

接收参数：<!--query传参时:$route.query.title,params传参时：$route.params.title-->

<li>消息标题:{{$route.params.title}}</li>