如何通过Get.back()从Page2向Page1回传值？附实现需求及代码示例请求

原生JavaScript多页面方案 #

适合传统多页面网站，通过URL参数或localStorage传递选中值：

Page 1（index.html） #

<!DOCTYPE html>
<html>
<head>
    <title>Page 1</title>
</head>
<body>
    <h3>请选择一个值</h3>
    <p>已选中的值：<span id="selectedValue">-</span></p>
    <button onclick="window.location.href='page2.html'">去选择值</button>

    <script>
        // 页面加载时读取传递的选中值
        window.onload = function() {
            // 通过URL参数获取值（刷新页面后参数会保留）
            const urlParams = new URLSearchParams(window.location.search);
            const selectedVal = urlParams.get('value');

            // 如果想用localStorage存储（适合需要持久化状态的场景）
            // const selectedVal = localStorage.getItem('selectedValue');

            if (selectedVal) {
                document.getElementById('selectedValue').textContent = selectedVal;
                // 用localStorage的话可以选择清除已保存的值
                // localStorage.removeItem('selectedValue');
            }
        }
    </script>
</body>
</html>

Page 2（page2.html） #

<!DOCTYPE html>
<html>
<head>
    <title>Page 2</title>
</head>
<body>
    <h3>选择一个值</h3>
    <ul>
        <li onclick="selectValue('选项A')">选项A</li>
        <li onclick="selectValue('选项B')">选项B</li>
        <li onclick="selectValue('选项C')">选项C</li>
    </ul>

    <script>
        function selectValue(value) {
            // 通过URL参数传递值回Page1
            window.location.href = `index.html?value=${encodeURIComponent(value)}`;

            // 用localStorage存储的方式
            // localStorage.setItem('selectedValue', value);
            // window.location.href = 'index.html';
        }
    </script>
</body>
</html>

Vue.js单页应用方案 #

如果是SPA项目，不需要跳转页面，用路由传参更高效：

路由配置（router/index.js） #

import Vue from 'vue'
import VueRouter from 'vue-router'
import Page1 from '../views/Page1.vue'
import Page2 from '../views/Page2.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Page1',
    component: Page1
  },
  {
    path: '/page2',
    name: 'Page2',
    component: Page2
  }
]

const router = new VueRouter({
  routes
})

export default router

Page1组件（views/Page1.vue） #

<template>
  <div class="page1">
    <h3>请选择一个值</h3>
    <p>已选中的值：<span>{{ selectedValue || '-' }}</span></p>
    <router-link :to="{ name: 'Page2' }">去选择值</router-link>
  </div>
</template>

<script>
export default {
  name: 'Page1',
  data() {
    return {
      selectedValue: ''
    }
  },
  beforeRouteEnter(to, from, next) {
    // 从Page2返回时接收选中值
    if (from.name === 'Page2' && from.params.selectedValue) {
      next(vm => {
        vm.selectedValue = from.params.selectedValue;
      });
    } else {
      next();
    }
  }
}
</script>

Page2组件（views/Page2.vue） #

<template>
  <div class="page2">
    <h3>选择一个值</h3>
    <ul>
      <li @click="selectValue('选项A')">选项A</li>
      <li @click="selectValue('选项B')">选项B</li>
      <li @click="selectValue('选项C')">选项C</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Page2',
  methods: {
    selectValue(value) {
      // 携带选中值跳转回Page1
      this.$router.push({ name: 'Page1', params: { selectedValue: value } });
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者Cricket Club