Vue router-link：同级或子级相对链接

Question

我正在开发一个 Web 应用程序，使用 Vue 2 作为框架，并使用随附的Vue Router进行路由。

我正在开发一种选项卡式视图，因此我当前的方法是为我的主要组件定义子路由。大致如下：

{ path: '/user/:id', component: User, children: [
    { path: '', component: UserHome },
    { path: 'profile', component: UserProfile },
    { path: 'posts', component: UserPosts }
]}

设置正常，路由按预期工作。我现在正在研究定义从User组件模板到其子组件（选项卡式导航）的链接。UserHome我还希望定义从组件直接到其同级组件 ( UserProfile& )的链接UserDetails。

据我所知，没有简单的方法可以避免在组件to的属性中重复完整路径router-link，从而避免破坏导航，请查看此工作小提琴和此损坏的小提琴并注意属性的值to。我希望能够将相对路径定义为to在子路径和/或兄弟路径之间导航的属性值。

有谁知道是否有更好的方法来避免在router-link组件中重复完整的导航路径？