使用 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

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

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

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

}

Answer 2

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

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 })
  }

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

Creating a next page button on Vuejs 3 with vue-router

vue.js

vue-router

vuejs3

vue-router4