vue2点击按钮跳转页面

在Vue2中，可以通过使用Vue Router来实现点击按钮跳转页面的功能。首先，在Vue项目中安装Vue Router库，然后在主文件中引入Vue Router并配置路由。接下来，创建需要跳转的组件，并在路由配置中设置对应的路由路径和组件。最后，在按钮点击事件中使用编程式导航方法进行页面跳转。

下面是一个简单的示例代码：

1. 安装Vue Router库：

npm install vue-router

2. 在主文件中引入Vue Router并配置路由：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  routes
})

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

3. 创建需要跳转的组件（例如Home.vue和About.vue）：

<template>
  <div>
    <h1>Home Page</h1>
    <button @click="goToAbout">Go to About</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToAbout() {
      this.$router.push('/about')
    }
  }
}
</script>

4. 在按钮点击事件中使用编程式导航方法进行页面跳转：

<template>
  <div>
    <h1>About Page</h1>
    <button @click="goToHome">Go to Home</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToHome() {
      this.$router.push('/')
    }
  }
}
</script>

通过以上代码，你可以在Vue2中实现通过点击按钮跳转页面的功能。在示例代码中，我们安装了Vue Router库，配置了两个路由（'/'和'/about'），并在对应的组件中使用了```$router.push()```方法实现了页面的跳转。