[指南] Vue-Router 的巢状路由和 Empty View 妙用

章节连结

Vue Router 是使用 Vue 框架的开发者,常会搭配使用的前端路由套件。若依照一般路由的规划层状结构习惯,如 view/azure/dashboard ,当中间的结构并没有对应内容,可以用 Empty View 的方法来进行跳转。这篇笔记下使用方法和重点设定。
vue.js logo vue


观念

由于每一次的跳转,父层都需要有个 <router-view /> 的标签才行。这点可以透过创造一个空的 EmptyRouterView.vue 档,内容仅含一个 <router-view /> 即可

步骤

1. 新增一个 EmptyRouterView.vue

2. route 的路径规划范例如下:


参考资料

1. Vue Router Architecture and Nested Routes

按赞加入粉丝团

延伸阅读