vue-router无法获取正确参数？URL中CFR参数无法通过route.params获取

这问题我碰到过好多次啦，核心原因就是你搞混了Vue Router里query和params两种传参方式的用法～

先看你的代码：你在router-link里用的是query字段传递CFR参数，这会把参数放到URL的查询字符串里（就是URL里?后面的部分），而this.$route.params是用来获取路由动态路径参数的，不是查询参数，所以自然拿到空对象。

怎么正确获取你的参数？ #

直接把this.$route.params换成this.$route.query就行！比如在目标页面的控制台打印this.$route.query.CFR，就能拿到2f19f86ff8be446f这个值了。

顺便给你理清楚两种传参的区别： #

• Query参数：

  • 用法：通过router-link的query字段传递，或者编程式导航里用$router.push({ query: { key: value } })
  • 表现：参数会出现在URL的?之后，比如你的例子http://localhost:8080/home/workpanel/?CFR=2f19f86ff8be446f
  • 获取方式：this.$route.query.xxx

• Params参数：

  • 用法：首先得在路由配置里定义动态路径，比如：

    // 路由配置文件里的示例
    {
      path: '/home/workpanel/:CFR', // 这里的:CFR就是动态参数
      name: 'Workpanel',
      component: WorkpanelComponent
    }
    

    然后在router-link里用params字段传递（注意要配合路由的name，或者直接拼在path里）：

    <!-- 方式1：用name + params -->
    <router-link :to="{name: 'Workpanel', params: {CFR: '2f19f86ff8be446f'}}" ></router-link>
    <!-- 方式2：直接拼在path里 -->
    <router-link :to="'/home/workpanel/' + '2f19f86ff8be446f'" ></router-link>
    

  • 表现：参数会作为URL路径的一部分，比如http://localhost:8080/home/workpanel/2f19f86ff8be446f
  • 获取方式：this.$route.params.CFR

所以回到你的问题，你用了query传参，就该用this.$route.query来取，别去params里找啦～

内容的提问来源于stack exchange，提问作者sof-03