Vue 如何通过按钮跳转到新页面并传递数据

在Vue开发中，实现通过按钮跳转到新页面并传递数据是一个常见需求。掌握这一技巧，能极大提升用户体验和数据交互的效率。

在Vue项目里，路由是实现页面跳转的关键。我们要确保项目已经配置好路由。在 router/index.js 文件中，定义好各个路由路径和对应的组件。比如：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import Detail from '@/components/Detail.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/detail/:id',
      name: 'Detail',
      component: Detail
    }
  ]
});

这里定义了两个路由，一个是首页 Home，另一个是详情页 Detail，并且在 Detail 路由中设置了参数 id。

接下来，在页面组件中创建按钮并实现跳转和数据传递。假设在 Home.vue 组件里有一个按钮：

<template>
  <div>
    <button @click="goToDetail(1)">跳转到详情页</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToDetail(id) {
      this.$router.push({
        name: 'Detail',
        params: {
          id: id
        }
      });
    }
  }
};
</script>

在这段代码里，按钮绑定了 goToDetail 方法，当按钮被点击时，会调用该方法。goToDetail 方法使用 this.$router.push 来实现路由跳转，并通过 params 传递数据，这里传递了 id 为 1。

在目标页面 Detail.vue 中接收传递过来的数据。在 Detail.vue 的 created 钩子函数中获取数据：

export default {
  created() {
    const id = this.$route.params.id;
    console.log('接收到的id:', id);
  }
};

通过 this.$route.params 可以获取到传递过来的参数。

除了通过路由参数传递数据，还可以使用 query 方式。在 goToDetail 方法里修改为：

goToDetail(id) {
  this.$router.push({
    name: 'Detail',
    query: {
      id: id
    }
  });
}

在 Detail.vue 中接收时变为：

created() {
  const id = this.$route.query.id;
  console.log('接收到的id:', id);
}

query 传递的数据会显示在URL中，而 params 是作为路径的一部分。

掌握这些方法，就能在Vue项目中轻松实现通过按钮跳转到新页面并传递数据，为项目开发带来更多便利。