vu e添加页面跳转按钮

要在Vue中添加页面跳转按钮，您可以使用Vue Router。首先，您需要安装Vue Router，可以通过以下命令完成：

npm install vue-router

然后，在您的Vue应用程序中，您需要创建一个Router实例。这可以通过创建一个JavaScript文件来完成，例如router.js，然后在该文件中编写以下代码：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import About from '@/components/About'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

在这里，我们导入Vue和Vue Router，并创建一个包含两个路由的Router实例：Home和About。然后，我们将该实例导出以供其他组件使用。

接下来，您需要在Vue组件中使用该Router实例。例如，在您的App.vue组件中，您可以添加以下代码：

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import router from '@/router'

export default {
  router
}
</script>

在这里，我们导入我们之前创建的Router实例，并在组件中使用`<router-link>`元素来创建指向Home和About路由的链接。我们还使用`<router-view>`元素来显示当前路由的组件。

现在，当您单击链接时，应用程序将使用Vue Router自动导航到相应的页面。