使用vue-router在Vuejs 3上创建下一页按钮

Question

我想在我的页面上添加一个按钮，以便它链接到路由器链接的下一页和上一页。我的路由器设置为：

          <li class="nav-item">
            <router-link :to="{ name: 'testa' }">TestA</router-link>
          </li>
          <li class="nav-item">
            <router-link :to="{ name: 'testb' }">Testb</router-link>
          </li>

我想做这样的东西：

<button @click="nextPage()> 
<button @click="PrevPage()> 

它将转到下一页(在这种情况下是testb)，以及前一页按钮，如果前一页存在，该按钮将转到前一页。

我的路由器的index.js如下所示

import { createRouter, createWebHistory } from 'vue-router'
const routes = [
  {
    path: '/home',
    name: 'testa',
    component: () => import('../views/home.vue')
  },
  {
    path: '/contact',
    name: 'testb',
    component: () => import('../views/contact.vue')
  },
  {
    path: '/testimonials',
    name: 'testc',
    component: () => import('../views/testimonials.vue')
  },

我该如何继续？

Answer 1

您可以添加元信息到路线，这是很好的，因为所有导航信息都在一个地方。

import { createRouter, createWebHistory } from 'vue-router'
const routes = [
  {
    path: '/home',
    name: 'testa',
    component: () => import('../views/home.vue'),
    meta: {
      next: 'testb',
      prev: 'testc'
    }
  },

然后在按钮方法中

methods:{
  prevPage(){
     this.$router.push({ name: this.$router.currentRoute.value.meta.prev})
  },
  nextPage(){
     this.$router.push({ name: this.$router.currentRoute.value.meta.next })
  }

Answer 2

在方法体中，您可以使用路由器推送方法来导航给定的路由：

<button @click="nextPage"> 
<button @click="PrevPage"> 

methods:{
prevPage(){
   this.$router.push({name:'testa'})
},
nextPage(){
   this.$router.push({name:'testb'})
}

}