vue2点击按钮路由跳转新页面重定向

在 Vue 2 中，如果你想要实现点击按钮后路由跳转到新的页面，通常会涉及到组件之间的导航。这需要使用 Vue Router 这个库来管理应用的路由。以下是基本步骤：

1. 首先，确保你已经安装了 Vue Router，并在项目中配置了它。如果还没有，你可以通过npm或yarn安装 `vue-router`：

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

2. 创建一个新的路由配置。例如，在 `router.js` 文件里：

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

   Vue.use(Router)

   const routes = [
     {
       path: '/new-page',
       name: 'NewPage',
       component: NewPageComponent,
     }
   ]

   export default new Router({
     routes
   })

3. 在需要跳转的组件（如按钮所在的组件）中，引入路由实例并使用 `this.$router.push()` 方法进行导航：

   <template>
     <button @click="goToNewPage">点击跳转</button>
   </template>

   <script>
   export default {
     methods: {
       goToNewPage() {
         this.$router.push('/new-page') // 替换为你配置的实际路径
       },
     },
   }
   </script>

4. 确保你在 `main.js` 或其他合适的文件中注册了路由器，并将其挂载到 Vue 实例上。

当你点击这个按钮时，就会触发 `goToNewPage` 方法，从而将用户导向新的页面 `/new-page`。