在VueJS中的锚标记href内设置基本url答案

【问题标题】：Setting the base url inside a anchor tag href in VueJS在VueJS中的锚标记href内设置基本url
【发布时间】：2021-09-13 09:54:35
【问题描述】：

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

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

我有两个环境。测试和生活。因此，当我更改环境时，我必须手动更改锚标记的 url 参数。但是如果不手动设置，我会尝试将他的基本网址放在该锚点内。

例如：不使用https://test.sample.site，如何设置基本网址？

【问题讨论】：

【解决方案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>

【讨论】：

【解决方案2】：

Laraval 提供了获取基本 URL 的方法：

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

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

如果您需要当前网址，请使用以下方法：

echo url()->current();

根据您的要求：

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

【讨论】：