Vue-CLI项目中使用Vue-Router获取URL参数时$route.query为空如何解决

原因1：参数获取时机早于路由初始化完成 #

App.vue作为根组件，created、mounted生命周期触发时，Vue Router可能还未完成初始路由的解析匹配，此时读取$route.query会返回空值。

解决方案 #

监听$route对象的变化，等待路由解析完成后再读取参数：

// 选项式API写法
export default {
  watch: {
    '$route': {
      immediate: true, // 组件初始化时就触发一次回调
      handler(newRoute) {
        console.log('client_id参数：', newRoute.query.client_id)
      }
    }
  }
}

如果是Vue3组合式API，写法如下：

import { watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
watch(
  () => route.query,
  (newQuery) => {
    console.log('client_id参数：', newQuery.client_id)
  },
  { immediate: true }
)

原因2：路由重定向时丢失参数 #

如果根路由/配置了重定向规则（比如重定向到/home等默认首页），重定向逻辑未携带原有query参数，会导致跳转后参数被清空。

解决方案 #

修改router/index.js中的重定向规则，手动携带原路径的所有参数：

const routes = [
  {
    path: '/',
    redirect: (to) => {
      // 将原query全部传递给重定向目标路径
      return { path: '/home', query: to.query }
    }
  },
  // 其余路由配置
]

原因3：hash模式下参数位置错误 #

当前项目使用hash路由模式（URL带#标识），如果参数写在#之前（例如http://localhost:8080/?client_id=xxx#/），路由无法识别该参数，必须将参数放在#和路由路径之后，你示例中的http://localhost:8080/#/?client_id=00000000000077是正确写法，若实际访问的URL参数位置不对调整即可。

原因4：路由实例未正确注册 #

检查项目入口文件main.js是否正确挂载了路由实例，确保存在对应注册逻辑：

// Vue2 写法
import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

// Vue3 写法
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

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