Vue - перейти к следующему дочернему маршруту - PullRequest
Новая
       8

Vue - перейти к следующему дочернему маршруту

0 голосов
/ 26 июня 2018

В настоящее время я установил эти маршруты (например, изменил имена), и у меня возникают проблемы с поиском способа навигации между дочерними страницами.

Мой план состоит в том, чтобы иметь несколько родительских страниц с дочерними страницами и некоторые навигационные стрелки, которые будут перемещаться по дочерним страницам только . 

  {
    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?

Спасибо

1 Ответ

0 голосов
/ 26 июня 2018

Вы можете использовать опцию routes, предоставленную конструктору VueRouter, для определения навигации: 

const parentPage = {
  template: `
    <div>
      <nav>
        <router-link v-if="prev" :to="prev">Prev</router-link>
        <router-link v-if="next" :to="next">Next</router-link>
      </nav>
      <router-view/>
    </div>
  `,
  computed: {
    routes() {
      return this.$router.options.routes.find(r => r.name === 'parentPage').children;
    },
    routeIndex() {
      return this.routes.findIndex(r => r.name === this.$route.name);
    },
    prev() {
      const route = this.routes[this.routeIndex - 1];
      return route && { name: route.name };
    },
    next() {
      const route = this.routes[this.routeIndex + 1];
      return route && { name: route.name };
    },
  },
};

const childPage1 = { template: '<div>childPage1</div>' };
const childPage2 = { template: '<div>childPage2</div>' };
const childPage3 = { template: '<div>childPage3</div>' };

new Vue({
  el: '#app',
  router: new VueRouter({
    routes: [
      {
        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,
          },     
        ],
      },
    ],
  }),
});
<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>
<script src="https://rawgit.com/vuejs/vue-router/dev/dist/vue-router.js"></script>

<div id="app">
  <router-link to="/parentPage/childPage1">/parentPage/childPage1</router-link>
  <router-view></router-view>
</div>
...