作用

简化路由的跳转,适合在路径过长的时候使用（例如：path:'/a/b/c/d/e/f/...'）
如何理解：相当于给路径起别名

使用方式

1. 给路由命名

//创建一个路由器
const router = new VueRouter({routes:[......{path:'/home',component:HomeVue,children:[{path:'news',/*二级路由不用写斜杠*/component:NewsVue},{path:'message',component:MessageVue,children:[{name:'detailName',path:'detail',component:DetailVue},]}],}],
})

2. 简化跳转

<!--简化前-->
<router-link to="/home/message/detail">详情页</router-link>
<!--简化后-->
<router-link :to="{name:'detailName'}">详情页</router-link>
<!--简化配合传递参数-->
<router-link :to="{name:'detailName',query:{id:666,title:'hello'}
}">详情页</router-link>

切记

使用命名路由时,要使用 v-bind:to来解析js对象，对象中声明name属性