Vue.js多页调查问卷适配浏览器前进后退按钮方案咨询

嘿，这个需求我太熟了！之前帮朋友做过类似的问卷系统，用Vue Router完全能把浏览器的前进后退和页面按钮的行为统一起来，咱们一步步来：

1. 先配置Vue Router基础结构 #

首先得把Vue Router集成到你的项目里（如果还没加的话），然后给每个问卷页面定义对应的路由。如果是固定页数的问卷，可以直接写死路由；如果页数动态，用路由参数会更灵活：

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入你的问卷页面组件
import QuestionPage1 from '../views/QuestionPage1.vue'
import QuestionPage2 from '../views/QuestionPage2.vue'
import QuestionPage3 from '../views/QuestionPage3.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/question/1' // 默认跳转到问卷第一页
  },
  // 用动态参数匹配页码，适合页数不固定的场景
  {
    path: '/question/:pageNum',
    component: (props) => {
      // 根据页码动态加载对应组件，避免一次性导入所有页面
      const componentName = `QuestionPage${props.params.pageNum}`
      return import(`../views/${componentName}.vue`)
    }
  }
]

const router = new VueRouter({
  mode: 'history', // 去掉URL里的#，记得后端要配置支持该模式的路由 fallback
  routes
})

export default router

2. 改造「上一页/下一页」按钮的逻辑 #

之前你可能是直接切换组件或修改显示状态，现在要改成通过Vue Router跳转——这样浏览器的历史记录会自动更新，前进后退按钮就能识别到页面变化：

<template>
  <div class="question-wrap">
    <!-- 上一页按钮 -->
    <button 
      v-if="currentPage > 1" 
      @click="navigatePage(currentPage - 1)"
      class="prev-btn"
    >
      上一页
    </button>
    
    <!-- 下一页按钮 -->
    <button 
      v-if="currentPage < totalPages" 
      @click="navigatePage(currentPage + 1)"
      class="next-btn"
    >
      下一页
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      totalPages: 3, // 问卷总页数，可从后端接口获取
      currentPage: 1
    }
  },
  created() {
    // 初始化时从路由参数读取当前页码
    this.currentPage = parseInt(this.$route.params.pageNum) || 1
  },
  watch: {
    // 监听路由变化，同步当前页码
    '$route.params.pageNum'(newPage) {
      this.currentPage = parseInt(newPage)
    }
  },
  methods: {
    navigatePage(targetPage) {
      // 用push方法添加历史记录，保证后退按钮能回到上一页
      this.$router.push(`/question/${targetPage}`)
      // 如果某些场景不允许用户后退（比如提交后），可以用replace替代push：
      // this.$router.replace(`/question/${targetPage}`)
    }
  }
}
</script>

3. 关键：处理问卷数据的持久化 #

路由切换时组件会重新渲染，用户填写的内容很容易丢失，所以得把数据存到全局或本地：

• 简单方案：用localStorage实时保存用户输入，组件初始化时读取：

// 比如在输入框的change事件中保存
saveAnswer(field, value) {
  localStorage.setItem(`q_${this.currentPage}_${field}`, value)
}

// 组件挂载时读取已保存的内容
mounted() {
  const savedName = localStorage.getItem(`q_${this.currentPage}_username`)
  if (savedName) {
    this.form.username = savedName
  }
}

• 复杂方案：用Vuex管理全局问卷数据，再配合localStorage持久化Vuex状态，适合多页面共享数据的场景。

4. 可选：用keep-alive缓存页面组件 #

如果不想每次切换路由都重新渲染组件（比如保留用户输入的状态），可以用<keep-alive>包裹路由视图：

<template>
  <div id="app">
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>

这样配置后，不管用户点击页面上的「上一页/下一页」，还是浏览器的前进/后退按钮，页面都会同步切换，行为完全一致！

内容的提问来源于stack exchange，提问作者George Salukvadze