Vue中使用Express.Router获取URL日期参数失败的原因与解决

一、前端核心问题（导致后端拿不到参数） #

1. 路由query参数格式错误
   $router.push的query必须是键值对对象，你直接传this.date会让URL参数格式变成/?2024/05/20这种无效格式，后端无法解析出合法的req.query。

2. 日期变更事件未绑定
   你的日期选择器没有触发updateDate方法的逻辑，选完日期后根本没执行路由更新，相当于参数没真正传到URL里。

3. Vue3语法错误

• setup和methods间缺少逗号，函数大括号未闭合
• Vue3的setup中不能用this.$router，需用useRouter钩子获取路由实例

二、修复后的前端代码（app.vue） #

<template>
  <div id="q-app">
    <div class="q-pa-md" style="max-width: 300px">
      <q-input filled v-model="date" mask="date" :rules="['date']">
        <template v-slot:append>
          <q-icon name="event" class="cursor-pointer">
            <q-popup-proxy>
              <!-- 绑定日期变更事件触发路由更新 -->
              <q-date v-model="date" @input="updateDate"></q-date>
            </q-popup-proxy>
          </q-icon>
        </template>
      </q-input>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

export default {
  setup () {
    const date = ref('2019/02/01')
    const router = useRouter()

    const updateDate = () => {
      router.push({
        name: router.currentRoute.value.name,
        query: { date: date.value } // 用键值对传递query参数
      })
    }

    return {
      date,
      updateDate
    }
  }
}
</script>

三、后端获取参数的正确方式（data.js） #

修复前端后，URL会变成http://你的域名/?date=2024/05/20格式，后端直接通过req.query.date提取参数即可：

const router = express.Router();

router.get("/", async function (req, res) {
  const userDate = req.query.date;
  console.log("user input date", userDate);
  // 后续业务逻辑
  res.send({ selectedDate: userDate });
});

额外检查项 #

• 确认浏览器Network面板中，前端向后端发送的请求URL确实带有?date=xxx参数
• 确保express已加载基础解析中间件（虽然query参数不需要，但避免其他问题）：

  const express = require('express');
  const app = express();
  app.use(express.urlencoded({ extended: true }));
  app.use(express.json());
  

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