如何在Vue模板中直接访问URL中的查询参数

首先明确结论：Vue默认没有提供全局可直接在模板调用的url相关内置对象，你示例的<span>{{ url.id }}</span>写法无法直接生效，你可以根据你的项目场景选择以下实现方式：

场景1：项目已接入Vue Router #

这是最简便的场景，Vue Router会自动把URL参数挂载到全局的$route响应式对象上，模板可以直接访问$route.query取查询参数，直接写下面的代码即可：

<span>{{ $route.query.id }}</span>

不需要额外编写任何JS逻辑，参数更新时视图也会自动同步更新。

场景2：项目未接入Vue Router #

你需要先手动解析浏览器URL参数，挂载到组件的响应式数据上，才可以在模板中调用：

1. 首先在组件JS逻辑中解析并存储参数：

export default {
  data() {
    return {
      // 存储所有查询参数的响应式对象
      query: {}
    }
  },
  created() {
    // 用浏览器原生API解析查询参数
    const searchParams = new URLSearchParams(window.location.search)
    this.query.id = searchParams.get('id')
    // 也可以遍历把所有参数都存到query里，方便取其他参数
    // for (const [key, value] of searchParams.entries()) {
    //   this.query[key] = value
    // }
  }
}

2. 模板中直接调用响应式数据即可：

<span>{{ query.id }}</span>

注意事项 #

如果你的项目用了服务端渲染（SSR，比如Nuxt.js），不要直接在组件生命周期里调用window.location，会因为服务端没有window对象报错，需要从服务端传递的请求上下文里获取URL再做解析。

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