vue命名路由

1. 作用 : 可以简化路由的跳转

2. 如何使用

1.给路由命名

{

            path:'/home',

            component:Home,

            children:[

                {

                    path:'news',

                    component:News,

                },

                {

                    path:'message',

                    component:Message,

                    children:[

                        {

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

                            path:'detail/:id/:title',//使用占位符声明接受params参数

                            component:Detail, 

                        }

                    ]

                },

            ]

        }

2.简化跳转

<!--简化跳转前,需要写完整路径-->

<router-link :to="`/home/message/detail`">{{m.title}}</router-link>

<!--简化跳转后-->

<router-link :to="{name:'xiangqing'}">{{m.title}}</router-link>

<!--简化写法配合传递参数-->

<router-link :to="{

     //使用params参数,必须使用name配置项,不能使用path配置象

     name:'xiangqing',

     params:{

          id:m.id,

          title:m.title

     }

}">

     {{m.title}}

</router-link>