获取基本 URL Vue.js

Vue.js 是一款流行的 JavaScript 前端框架。在许多项目中，我们需要获取当前页面的 URL，以便进行某些操作，例如发送 AJAX 请求或者重定向。

本文将介绍如何在 Vue.js 应用程序中获取当前页面的基本 URL。

方法一：使用 window.location

我们可以使用 JavaScript 的 window.location 对象获取当前页面的 URL。这个对象包含许多属性，例如 href, protocol, host, port, pathname 等等。

以下是一个获取当前页面基本 URL 的代码片段：

const baseUrl = window.location.protocol + '//' + window.location.host;

这个代码片段使用了 window.location.protocol 获取当前页面的协议（例如 http 或者 https），使用 window.location.host 获取当前页面的主机名（例如 localhost:8080 或者 example.com）。然后将这两个字符串拼接起来，就得到了基本 URL。

方法二：使用 Vue Router

在 Vue.js 应用程序中，我们通常使用 Vue Router 管理页面路由。这个插件提供了一些工具方法，可以方便地获取当前页面的 URL。

以下是一个使用 Vue Router 获取当前页面基本 URL 的代码片段：

import router from '@/router';

const baseUrl = window.location.protocol + '//' + window.location.host + router.options.base;

这个代码片段首先导入了 Vue Router，然后使用 router.options.base 获取当前页面的基本路径，例如 /my-app/。然后将获取到的基本路径和之前的协议和主机名拼接起来，就得到了基本 URL。

需要注意的是，router.options.base 的值可以在 Vue Router 配置中设置。如果没有设置，这个值默认是 /。

总结

本文介绍了两种方法，在 Vue.js 应用程序中获取当前页面的基本 URL。第一种方法使用了 JavaScript 的 window.location 对象，第二种方法使用了 Vue Router。大家可以根据自己的实际需求选择合适的方法。

代码片段已按照markdown格式标注，如需复制，请在代码片段前后加上三个反引号（```）。