如何在数据对象中创建 Nuxt 路由完整路径？

Question

我正在尝试将 social share 集成到我的 nuxt 应用程序中，我正在尝试在数据对象中设置我的页面 URL。以下是我的代码，请指导我如何设置 sharing.url 就像我们对 NuxtLink?

所做的那样

<NuxtLink :to="{ name: 'posts-slug', params: { slug: post.slug } }">
  some title
</NuxtLink>

social share component

<template>
  <ShareNetwork
    v-for="network in networks"
    :url="sharing.url"
    :title="sharing.title"
    :description="sharing.description"
  >
  </ShareNetwork>
</template>

<script>
export default {
  data() {
    return {
      sharing: {
        // how can I set following url with the post prop, like I did with Nuxt link which creates href
        url: 'https://mywebsite.com/posts/wide-angle-mountain-view',
        title: 'Say hi to Vite!',
        description: 'This week',
      },
    }
  },
}
</script>

Answer 1

你可以有这样的东西

:url="`${nuxtServerBaseUrl}/posts/${post.slug}`"

其中 nuxtServerBaseUrl 是您的 publicRuntimeConfig 环境变量。

关于配置suggested here。

如何在数据对象中创建 Nuxt 路由完整路径？

How to create Nuxt route full path in the data object?

vue.js

nuxt.js