Vue.js如何基于URL查询参数正确定义vue-router路由路径

路由匹配规则的path字段仅对URL的路径部分生效，查询字符串（?及之后携带的参数）不属于路径匹配范畴，你将?code=:code写入path的写法不符合Vue Router的匹配规则，因此无法命中目标路由。

1. 修正路由配置 #

移除path中多余的查询参数定义，通过props函数模式将URL查询参数映射为组件接收的prop：

// route.js 中修改对应路由配置
{ 
  path: '/public/form', // 仅保留实际路径段，删除查询参数相关的错误写法
  name: 'survey',
  component: () => import('./views/form'),
  // 配置props映射，从路由query中取code传递给组件
  props: (route) => ({
    code: route.query.code
  })
}

注：动态路径参数:xxx仅适用于路径段参数（例如/public/form/:code匹配/public/form/fhuZ15aHy这类路径结构），不适用于?key=value格式的查询参数。

2. 处理同组件复用的参数响应 #

由于不同code值的请求命中的是同一个路由组件，Vue默认会复用组件实例，不会重新触发组件的挂载生命周期，你需要通过以下两种方式之一感知code参数的变化：

• 方式一：监听code prop变化（推荐，性能更好）
  在form.vue中添加对code的监听，首次进入和参数变化时都执行对应业务逻辑（比如拉取对应表单数据）：

// 选项式API示例
export default {
  props: {
    code: {
      type: String,
      required: true
    }
  },
  watch: {
    code: {
      handler(newCode) {
        // 编写code变化后的业务逻辑，例如加载表单配置
        this.fetchFormConfig(newCode)
      },
      immediate: true // 首次进入组件时立即触发
    }
  }
}

// 组合式API示例
const props = defineProps({
  code: {
    type: String,
    required: true
  }
})
watch(() => props.code, (newCode) => {
  fetchFormConfig(newCode)
}, { immediate: true })

• 方式二：强制参数变化时重建组件
  如果不想单独写监听逻辑，可以在全局路由出口<router-view>上绑定key为路由完整路径，参数变化时会直接销毁重建组件，重新走完整生命周期：

<!-- App.vue 中的路由出口 -->
<router-view :key="$route.fullPath" />

该方式实现简单，但每次参数变化都会重挂载组件，适合业务逻辑简单的场景。

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