在 VueJS 中的锚标记 href 内设置基础 url

Question

在我的 Vue JS 应用程序中，我有一个组件可以在 Twitter 和 Facebook 上分享 link。以下是我的 Twitter 分享选项代码

<a href="http://twitter.com/share?text=Verbatim&url=https://test.sample.site/&hashtags=hashtag1,hashtag2,hashtag3">

我有两个环境。测试和生活。因此，每当我更改环境时，我都必须手动更改锚标记的 url 参数。但是在没有手动设置的情况下，我试图将他的基地 url 放在那个锚点内。

例如：不使用 https://test.sample.site 我如何设置基数 url？

Answer 1

您可以使用 window.location.origin.

在 data 属性:

data: () => {
    return {
      baseUrl: window.location.origin,
    };
},

并且在 template 部分：

<a :href="`http://twitter.com/share?text=Verbatim&url=${baseUrl}&hashtags=hashtag1,hashtag2,hashtag3`"
>link</a>

Answer 2

Laraval 已经提供了获取基数的方法URL:

// Get the base URL.
echo url('');

// .env file set app URL
echo config('app.url');

如果您需要电流 URL 则使用以下方法：

echo url()->current();

根据您的要求：

<a href="http://twitter.com/share?text=Verbatim&url={{ url('') }}/&hashtags=hashtag1,hashtag2,hashtag3">example</a>

Setting the base url inside a anchor tag href in VueJS