vue点击按钮跳转页面

在Vue中，可以使用vue-router来实现点击按钮后页面的跳转。以下是一个简单的示例：

1. 首先确保你已经安装并设置了vue-router。
2. 定义路由：

// router.js
import Vue from 'vue';
import Router from 'vue-router';
import HomePage from './components/HomePage.vue';
import AboutPage from './components/AboutPage.vue';
 
Vue.use(Router);
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomePage
    },
    {
      path: '/about',
      name: 'about',
      component: AboutPage
    }
    // 其他路由...
  ]
});

3. 在组件中使用router-link来定义导航链接或者编程式导航：

<template>
  <div>
    <!-- 使用 router-link 组件 -->
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
 
    <!-- 使用按钮进行跳转 -->
    <button @click="goToAbout">Go to About Page</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    goToAbout() {
      // 使用编程式导航跳转到 /about 页面
      this.$router.push('/about');
    }
  }
};
</script>

在上面的例子中，我们定义了两个路由：/和/about。router-link用于静态导航，而按钮点击事件goToAbout中使用this.$router.push来编程式地实现页面跳转。当点击按钮时，会调用goToAbout方法，从而将用户导航到/about路径对应的页面。