Vue.js从URL获取查询字符串参数值：$route.query.id报错问题

你在尝试从URL http://localhost:8058/HTML/Int/Request.html?id=36 获取id参数时遇到了TypeError: Cannot read property 'query' of undefined的错误，我来帮你拆解问题并给出针对性解决方案：

错误原因分析 #

这个报错核心是this.$route为undefined，通常由以下几种情况导致：

• 项目未正确配置Vue Router路由插件
• 代码上下文不是Vue组件实例（比如在普通JS文件中编写）
• Vue 3项目中未使用正确的路由钩子函数

逐一排查解决 #

1. 确认Vue Router已正确配置 #

如果你的项目依赖Vue Router管理路由，先检查入口文件（比如main.js）的配置是否完整：

import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入你的路由规则文件
import routes from './routes'

// 必须先注册路由插件
Vue.use(VueRouter)

// 创建路由实例
const router = new VueRouter({
  routes,
  // 根据需求选择hash/history模式
  mode: 'history'
})

// 将路由挂载到Vue根实例
new Vue({
  router, // 这里必须传入router选项
  render: h => h(App)
}).$mount('#app')

只有完成上述配置后，Vue组件的this上才会挂载$route对象。

2. 检查代码上下文是否为Vue组件 #

如果你的代码写在普通.js文件（而非.vue组件）中，this并不指向Vue实例，自然无法访问$route。这种情况下，直接用原生JavaScript获取URL参数更高效：

// 封装一个通用的URL参数获取函数
function getUrlParam(paramName) {
  const searchParams = new URLSearchParams(window.location.search);
  return searchParams.get(paramName);
}

// 获取id参数
const id = getUrlParam('id');
console.log(id); // 输出36

3. Vue 3项目的特殊处理 #

如果你使用的是Vue 3，setup函数中this不再指向组件实例，需要使用useRoute钩子来获取路由信息：

import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    console.log(route.query.id); // 输出36
    // 后续可直接使用route.query.id
  }
}

4. 兜底方案：Vue组件中直接用原生方法获取 #

不管路由配置情况如何，你都可以在Vue组件的生命周期钩子（比如created、mounted）中用原生JS获取参数：

export default {
  created() {
    const urlParams = new URLSearchParams(window.location.search);
    const id = urlParams.get('id');
    console.log(id); // 输出36
  }
}

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