命名路由
1、作用:可以简化路由的跳转
2、如何使用
1、给路由命名:
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',
component:Detail
}
]
}
]
},
]
2、简化跳转
<!-- 简化前,需要写完整路径-->
<router-link :to="{path:'/home/message/detail',query:{id:p.id,title:p.title}}">{{p.title}}</router-link>
<!-- 简化后,直接通过名字跳转-->
<router-link :to="{name:'xiangqing',query:{id:p.id,title:p.title}}">{{p.title}}</router-link>