vue点击按钮跳转页面

你可以使用Vue Router来实现页面跳转，具体操作步骤如下：

1. 安装Vue Router

在命令行中执行以下命令进行安装：

npm install vue-router

2. 创建路由实例

在Vue实例中使用Vue Router，需要首先创建一个路由实例。在你的Vue项目中，可以在`src`目录下创建一个名为`router.js`的文件，实现路由的创建：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

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

在上面的示例中，我们创建了一个名为`router`的路由实例，其中定义了两个路由：`/`和`/about`。这里的`Home`和`About`是组件名，需要先在Vue实例中定义好。

3. 在Vue实例中使用路由

在Vue实例中使用路由，需要在`main.js`文件中导入路由实例并挂载到Vue实例上：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

现在，你的Vue应用已经使用了Vue Router。

4. 创建组件并定义路由

在Vue应用中，每个页面都是由一个组件构成的。我们需要先创建组件，然后在路由实例中定义路由。

例如，我们创建一个名为`Home`的组件，并在路由实例中定义路由：

import Home from './components/Home.vue'

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

在上面的示例中，我们在路由实例中定义了一个名为`Home`的路由，并将其映射到了一个名为`Home`的组件上。

5. 创建导航链接

在Vue应用中，使用`<router-link>`标签来创建导航链接。例如，我们在`App.vue`组件中创建一个导航链接：

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

在上面的示例中，我们创建了两个导航链接，分别对应`/`和`/about`两个路由。

6. 实现页面跳转

现在，我们已经完成了所有的准备工作，可以开始实现页面跳转了。当用户点击导航链接时，Vue Router会自动跳转到对应的路由。

例如，当用户点击`<router-link to="/about">About</router-link>`时，会自动跳转到`/about`路由，显示`About`组件中的内容。

这就是使用Vue Router实现页面跳转的完整流程。