angularjs - AngularJS 中的相对链接

Question

在我的模板中，我想使用相对路由。目前我的 anchor 有绝对路径href，这是次优的

<a href="/#/dashboard/settings">Settings</a>

如何将其重写为相对导航（在此相对于dashboard）？

它应该适用于 hashbang 和 html5 历史 API 路由（无论 AngularJS 使用或回退到哪个）

Answer 1

在您的控制器中，您可以查看$routeParams并构建一个基本url 来进行操作。

从那里您的模板可以操作"{{baseUrl}}/relative/to/scope/baseUrl"

并且在您的代码中构建的 url 可以转到$scope.baseUrl + /relative/to/scope/baseUrl";

它并不完全是“相对的”，但它确实解决了允许 url 改进其他 url 的问题，而不必对层次结构进行硬编码并担心路由参数是变量等。

Answer 2

我不确定你的角度版本，但在我的 1.2.18 中，当你设置

<base href="/base"></base>

并且每当在您的元素href中，您以“relative/to/you/url”开头，然后您的链接将指向“/b​​ase/relative/to/you/url”：

<a href="relative/to/you/url"></a>

注意：我已经为 $locationProvider 开启了 html5 api 模式：

$locationProvider.html5Mode(true);

<base>编辑：有关标签，请参阅 MDN 文档。https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

Answer 3

我不认为你可以重写它来使用相对导航。如果您想链接到/user/profile，但您的用户在/dashboard/settings. 如果主导航链接到简单profile（相对），它将转到/dashboard/profile，我假设这不是您想要的。

为什么相对路径在您的应用程序中如此重要？除了节省击键还有什么？

Answer 4

老问题，但我发现这有效：

$locationProvider.html5Mode({
    enabled: true,
    requireBase: false,
    rewriteLinks: false
});