一、情景说明

我们使用router-link，配置path属性时，如果是多级路由，会写一个很长的path
如下代码：

<!-- 跳转路由并携带query参数，to的对象写法 -->
<router-link :to="{path:'/home/message/detail',query:{id:m.id,title:m.title}
}">{{m.title}}
</router-link>

这样，就很不方便
为了简化path写法
这里就用到了路由命名技术。

二、案例

index.js
关键配置：name

// 该文件专门用于创建整个应用的路由器
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',component:Detail,}]}]}]
})

router-link中使用name配置代替path配置

<!-- 跳转路由并携带query参数，to的对象写法 -->
<router-link :to="{name:'xiangqing',query:{id:m.id,title:m.title}
}">{{m.title}}
</router-link>

三、注意事项

name配置的使用前提，必须是在to属性的对象写法中才能使用。