点击添加按钮如何跳转到另一个vue

在Vue.js中，当你需要通过点击“添加”按钮跳转到另一个组件时，可以使用Vue Router库来实现导航。首先，你需要安装`vue-router`并配置路由。以下是基本步骤：

1. 安装 `vue-router`:

   npm install vue-router

2. 配置 `router.js` 或者 `main.js` (取决于你的应用结构)：

   import Vue from 'vue';
   import Router from 'vue-router';
   Vue.use(Router);

   const routes = [
     {
       path: '/add', // 路由路径
       component: AddComponent, // 你要跳转的目标组件
       name: 'Add' // 可选的别名，方便在模板中引用
     }
   ];

   const router = new Router({
     routes
   });

   export default router;

3. 在包含路由配置的Vue实例中注册路由器：

   new Vue({
     el: '#app',
     router,
     // ...其他配置
   });

4. 在点击添加按钮的地方，使用`this.$router.push`触发路由切换：

   <button @click="goToAddPage">添加</button>

   methods: {
     goToAddPage() {
       this.$router.push('/add');
     }
   }

现在，当用户点击添加按钮时，会跳转到指定的 `/add` 组件。