如何用vite-plugin-pages生成接收非URL参数的路由？

数据老陈

2026-8-7

问题原因

自动生成的verify路由未在路径中定义phone动态参数段，Vue Router会自动丢弃不属于路由配置的params参数——它默认要求params必须对应路由路径里的动态片段（如/verify/:phone），因此出现参数丢弃和警告。

解决方案（基于Pinia）

因为你不想手动修改路由定义、也不愿将参数放入URL，用Pinia做临时状态存储是适配需求的方案，具体实现步骤：

1. 创建Pinia状态仓库

新建stores/routeParams.js文件，用于存储临时路由参数：

import { defineStore } from 'pinia'

export const useRouteParamsStore = defineStore('routeParams', {
  state: () => ({
    tempPhone: null
  }),
  actions: {
    setTempPhone(phone) {
      this.tempPhone = phone
    },
    clearTempPhone() {
      this.tempPhone = null
    }
  }
})

2. 跳转前存入参数

在发起跳转的页面组件中，先将参数存入Pinia再执行路由跳转：

import { useRouteParamsStore } from '@/stores/routeParams'
import { useRouter } from 'vue-router'

const router = useRouter()
const paramsStore = useRouteParamsStore()

// 触发跳转的逻辑
const navigateToVerify = () => {
  paramsStore.setTempPhone('+18383')
  router.push({ name: 'verify' })
}

3. 目标页面读取并清理参数

在verify.vue组件中，读取Pinia存储的参数，并在组件挂载后/卸载时及时清理，避免数据残留：

import { useRouteParamsStore } from '@/stores/routeParams'
import { onMounted, onUnmounted } from 'vue'

const paramsStore = useRouteParamsStore()
let phone = null

onMounted(() => {
  // 获取临时参数
  phone = paramsStore.tempPhone
  // 读取后立即清理
  paramsStore.clearTempPhone()
})

onUnmounted(() => {
  // 确保组件卸载时清理参数，防止影响其他页面
  paramsStore.clearTempPhone()
})