nuxt-link 将配置变量作为查询键传递答案

【问题标题】：nuxt-link passing a config variable as the query keynuxt-link 将配置变量作为查询键传递
【发布时间】：2021-09-17 09:34:13
【问题描述】：

我想将一个环境配置变量 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？

【问题讨论】：

【解决方案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> 中访问此值

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

【讨论】：