Question

我的主要目标实际上是通过路由参数路由到不同的语言，但是只使用一个页面/组件，这会通过路由参数进行api调用。

我无法解决它，也找不到解决方案或描述方式。

我基本上想用asyncData在Nuxt中进行axios调用，并在其中传递路由参数。

（最后，我的动态调用应该转换为类似http：// localhost：1337 / articles？Language = German的语言）

这是我最好的：致电：

  asyncData({ params, error }) {
    return axios
      .get(`http://localhost:1337/articles?Language=${this.paramToString}`)
      .then(res => {
        return { articles: res.data }
      })
      .catch(e => {
        error({ statusCode: 404, message: 'Post not found' })
      })
  },

对象：

  data() {
    return {
      language: {
        pl: 'Polish',
        de: 'German',
        en: 'English'
      }
    }
  },

计算属性以获取帮助：

  computed: {
    paramToString () {
      const route = (this.$route.params.lang)
      return (this.language[route]).toString()
    }

在此之前，我直接尝试.get（http://localhost:1337/articles?Language=${this.language[this.$route.params.lang]}），但我总是从Nuxt获得“无法读取未定义的属性'paramToString'”

更新：

我设法使其与asyncData内部的对象一起使用...虽然可以使用，但感觉不像是正确的方法... 有什么建议，如何使它更好？

  asyncData({ params, error }) {
    const language = {
      pl: 'Polish',
      de: 'German',
      en: 'English',
    }
    return axios
      .get(`http://localhost:1337/articles?Language=${language[params.lang]}`)
      .then((res) => {
        return { articles: res.data }
      })
      .catch((e) => {
        error({ statusCode: 404, message: 'Post not found' })
      })
  },

我在做什么错了？

谢谢。

Vue / Nuxt asyncData将路由参数传递为对象键，以使用URL中的值

0 个答案: