vue项目如何访问一个页面跳转另一个页面

在Vue项目中，要从一个页面跳转到另一个页面并传递参数，通常有以下两种方法：

1. 使用`this.$router.push()`[^1]:

// 假设你有一个名为`HomeComponent.vue`的组件
<template>
  <button @click="goToDetail">跳转到详情页</button>
</template>

<script>
export default {
  methods: {
    goToDetail() {
      // 路由配置对象，包括目标路由和查询参数
      const routerOptions = {
        path: '/detailPage',
        query: { detailData: '要传递的数据' }, // 可以替换为你需要传递的实际数据
      };
      this.$router.push(routerOptions);
    }
  }
}
</script>

2. 使用`this.$router.push()`与`$route.query`配合[^2]:

// DetailComponent.vue
created() {
  this.detailData = this.$route.query.detailData; // 初始化接收传来的参数
}

<template>
  <div>接收到的详情数据: {{ detailData }}</div>
</template>

当在`HomeComponent`点击按钮时，会跳转到`/detailPage`，并附带`detailData`参数。