nuxt-link 传递一个配置变量作为查询键

Question

我想将环境配置变量 process.env.config.myVar 传递给我的 nuxt-link，例如：

:to="{
  name: 'search-page',
  query: {
    process.env.config.myVar: { query: `${searchValue}` }
  }
}"

到目前为止我试过这个：

:to="{
  name: 'search-page',
  query: {
    ['process.env.config.myVar']: { query: `${searchValue}` }
  }
}"

但它打印整个 process.env.config.myVar 作为参数。还尝试将其分配给数据变量，例如：myVar= process.env.config.myVar 然后将其传递给 nuxt-link:

:to="{
  name: 'search-page',
  query: {
    myVar: { query: `${searchValue}` }
  }
}"

但它打印 myvar 作为参数。我如何将该环境变量传递给我的 nuxt-link?

Answer 1

当您想将 javascript 参数用作对象键时，不应使用引号：

[process.env.config.myVar]: { query: `${searchValue}` }

但是，您也无法访问 Vue 中单文件组件的 <template> 语法中的 process。 Nuxt 利用了 runtimeConfig 的思想，因此我们可以直接将值共享给我们的 $config 对象：

// nuxt.config.js
publicRuntimeConfig: {
  myVar: process.env.config.myVar
}

现在您可以使用 $config.myVar

在 <template> 中访问 this 的值

:to="{
  name: 'search-page',
  query: {
    [$config.myVar]: { query: `${searchValue}` }
  }
}"

nuxt-link passing a config variable as the query key