vue 点击按钮页面跳转

在Vue.js中，点击按钮让页面进行路由跳转通常涉及以下几个步骤：

1. **安装并配置路由库**：如果你还没有安装Vue Router，首先需要在项目中安装它，可以使用npm或yarn命令行工具：

   npm install vue-router
   # 或者
   yarn add vue-router

2. **创建路由实例**：在main.js或其他适当的位置，你需要创建一个新的VueRouter实例，并定义你要的路由规则，例如：

   import Vue from 'vue';
   import Router from 'vue-router';
   import Home from './views/Home.vue'; // 示例：假设Home.vue是主页组件

   Vue.use(Router);

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

   export default new Router({
     routes,
   });

3. **在模板中绑定按钮事件**：在你的按钮元素上绑定`@click`事件，当点击时，触发跳转操作。比如在`.vue`文件里：

   <template>
     <button @click="goToPage">跳转到首页</button>
   </template>

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

这里`this.$router.push('/')`会将用户导航到路由列表的第一个路径（在这个例子中就是首页）。