【前端分享】vue开发项目，如何实现 从A页面跳转到B页面,并传值！

Vue 页面双向跳转+传值（A↔B）完整实现

在 Vue 中实现 A → B → A 并携带参数回传 ，核心用 Vue Router 配合路由传参 ，最常用两种方案：编程式导航 + query/params 传参 （简单场景）、路由守卫 + 状态管理（复杂场景）。

我直接给你最实用、开箱即用的实现方法，分步骤写清楚。

---

一、准备工作（路由配置）

先确保你的 router/index.js 配置好 A、B 页面路由：

import Vuefrom'vue'
importRouterfrom'vue-router'
importPageAfrom'@/views/PageA'
importPageBfrom'@/views/PageB'

Vue.use(Router)

exportdefaultnewRouter({
routes: [
    { path: '/', name: 'PageA', component: PageA },
    { path: '/pageB', name: 'PageB', component: PageB }
  ]
})

---

二、核心实现：A → B → A 回传参数

方案1：最简单 ------ 路由 query 传参（推荐新手）

适用：简单字符串、数字等小数据，URL 会显示参数（无隐私）。

步骤1：A 页面跳转到 B 页面

PageA.vue（发送方）

<template>
  <div>
    <h2>A 页面</h2>
    <button @click="goToB">跳转到 B 页面</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToB() {
      // 跳转到 B 页面，可携带参数给 B
      this.$router.push({
        path: '/pageB',
        query: { from: 'A页面' } // 传给 B 的参数
      })
    }
  }
}
</script>

步骤2：B 页面接收参数，再跳回 A 并传值

PageB.vue（中转+回传）

<template>
  <div>
    <h2>B 页面</h2>
    <p>来自 A 的参数：{{ $route.query.from }}</p>
    <button @click="backToA">跳回 A 页面，并传递消息</button>
  </div>
</template>

<script>
export default {
  methods: {
    backToA() {
      // 跳回 A，**携带回传参数**
      this.$router.push({
        path: '/',
        query: { 
          msg: '我是B页面传回的消息',
          status: 'success' 
        }
      })
    }
  }
}
</script>

步骤3：A 页面接收 B 传回的消息

PageA.vue（接收回传参数）

<script>
export default {
  // 监听路由变化（必须加，否则页面不刷新拿不到参数）
  watch: {
    $route(to) {
      this.getMsgFromB(to.query)
    }
  },
  mounted() {
    // 初始化也获取一次
    this.getMsgFromB(this.$route.query)
  },
  methods: {
    getMsgFromB(query) {
      if (query.msg) {
        console.log('B 传回的消息：', query.msg)
        alert(query.msg) // 你可以渲染到页面、存储到变量等
      }
    }
  }
}
</script>

---

方案2：隐私数据 ------ params 传参（URL 不显示）

适用 ：不想让参数暴露在 URL 中，必须用路由 name 跳转。

A 跳 B

this.$router.push({
  name: 'PageB', // 必须用 name
  params: { id: 1001 }
})

B 跳回 A 并传参

this.$router.push({
  name: 'PageA',
  params: { msg: 'B 传回的隐私消息' }
})

A 接收 params

this.$route.params.msg

---

方案3：复杂数据 ------ 全局状态管理（Vuex/Pinia）

适用：传递对象、数组、大量数据，或多个页面共享数据。

存数据（B 页面）

// Vuex
this.$store.commit('SET_MSG', 'B传给A的数据')

// Pinia
this.store.msg = 'B传给A的数据'

跳回 A

this.$router.push('/')

A 页面取数据

computed: {
  msgFromB() {
    // Vuex
    return this.$store.state.msg
    // Pinia
    // return this.store.msg
  }
}

---

三、关键知识点（必看）

1. 1. $router 和 $route 的区别

   • • $router：路由实例，用来跳转页面 （push/go/back）

   • • $route：当前路由信息，用来获取参数 （query/params）

2. 2. query 和 params 区别

   方式	URL 显示	数据类型	刷新页面
   query	显示（?msg=xxx）	字符串	参数保留
   params	不显示	任意	参数丢失

3. 3. A 页面必须监听 $route

   因为 Vue 页面复用，不监听路由变化，无法实时拿到回传参数。

---

四、最简完整代码（直接复制可用）

PageA.vue

<template>
  <div>
    <h1>A 页面</h1>
    <p>{{ msg }}</p>
    <button @click="goToB">去 B 页面</button>
  </div>
</template>

<script>
export default {
  data() {
    return { msg: '' }
  },
  watch: { $route: 'getMsg' },
  mounted() { this.getMsg() },
  methods: {
    goToB() { this.$router.push('/pageB') },
    getMsg() {
      if (this.$route.query.msg) {
        this.msg = this.$route.query.msg
      }
    }
  }
}
</script>

PageB.vue

<template>
  <div>
    <h1>B 页面</h1>
    <button @click="backToA">返回 A 并传消息</button>
  </div>
</template>

<script>
export default {
  methods: {
    backToA() {
      this.$router.push({
        path: '/',
        query: { msg: '✅ 我是从B页面带回来的消息' }
      })
    }
  }
}
</script>

---

总结

1. 1. 简单数据 → 用 query 传参（最方便、永不丢失）
2. 2. 隐私数据 → 用 params 传参
3. 3. 复杂对象 → 用 Vuex/Pinia
4. 4. A 页面必须监听 $route 才能实时获取回传参数