Javascript Vue-导航到下一个子路由

目前，我已经准备好了这些路由（例如更改了名称），并且在找到在子页面之间导航的方法时遇到了问题

我的计划是有多个带有子页面的父页面，以及一些导航箭头，这些箭头将只在子页面中导航

  {
    path: '/parentPage',
    name: 'parentPage',
    component: parentPage
    children: [
      {
        path: 'childPage1',
        name: 'childPage1',
        component: childPage1
      },
      {
        path: 'childPage2',
        name: 'childPage2',
        component: childPage2
      },
      {
        path: 'childPage3',
        name: 'childPage3',
        component: childPage3
      },     
    ]
  }

但我想知道是否有办法导航到列表中的下一个和上一个子项

例如，如果我在“childPage2”，我希望能够单击按钮导航到下一个孩子和上一个孩子？然后在“childPage3”上只会有一个返回的选项，因为没有childPage4

---

谢谢

您可以使用提供给

VueRouter

构造函数的

路由

选项来确定导航：

const parentPage={
模板：`
上
下一个
`,
计算：{
路线（）{
返回此.$router.options.routes.find（r=>r.name==='parentPage'）。子项；
},
路由索引（）{
返回this.routes.findIndex（r=>r.name==this.$route.name）；
},
prev（）{
const route=this.routes[this.routeIndex-1]；
返回路由&&{name:route.name}；
},
下一个（）{
const route=this.routes[this.routeIndex+1]；
返回路由&&{name:route.name}；
},
},
};
const childPage1={template:'childPage1'}；
const childPage2={template:'childPage2'}；
const childPage3={template:'childPage3'}；
新Vue({
el:“#应用程序”，
路由器：新VueRouter({
路线：[
{
路径：'/parentPage'，
名称：'parentPage'，
组件：父页面，
儿童：[
{
路径：“childPage1”，
姓名：'childPage1'，
组成部分：childPage1，
},
{
路径：“childPage2”，
姓名：'childPage2'，
组成部分：childPage2，
},
{
路径：“childPage3”，
姓名：'childPage3'，
组成部分：第3页，
},     
],
},
],
}),
});

/父页面/子页面1
太好了，谢谢！还有人建议我在每条路线上使用meta属性，并使用“this.$push”在那里导航