AngularJS应用程序使用HTML5模式在锚定标签中链接/路由

发布时间：2020-12-17 07:33:09 所属栏目：安全来源：网络整理

导读：如何链接到锚A标签中的其他AngularJS应用程序位置？我使用 HTML5无哈希模式,并希望避免让页面实际重新加载. 例如,在非HTML5模式下,我会这样做： a href='#/path'Link/a 在HTML5模式下,我可以这样做： a href='/path'Link/a 但这实际上导致浏览器重新加载新的

如何链接到锚A标签中的其他AngularJS应用程序位置？我使用 HTML5无哈希模式,并希望避免让页面实际重新加载.

例如,在非HTML5模式下,我会这样做：

<a href='#/path'>Link</a>

在HTML5模式下,我可以这样做：

<a href='/path'>Link</a>

但这实际上导致浏览器重新加载新的URL.我也尝试过使用ng-href和/#/ path语法,但是似乎没有任何一种工作方式.

如何从锚标签正确链接？

更新：

似乎这样可能没有使用$位置,你只需要保持相同的基本链接. From the docs：

When you use HTML5 history API mode,you will need different links in different browsers,but all you have to do is specify regular URL links,such as: <a href=”/some?foo=bar”>link</a>

When a user clicks on this link,

In a legacy browser,the URL changes to /index.html#!/some?foo=bar

In a modern browser,the URL changes to /some?foo=bar

In cases like the following,links are not rewritten; instead,the browser will perform a full page reload to the original link.

Links that contain target element. Example: <a href=”/ext/link?a=b” target=”_self”>link</a>

Absolute links that go to a different domain. Example: <a href=”http://angularjs.org/”></a>

Links starting with ‘/’ that lead to a different base path when base is defined. Example: <a href=”/not-my-base/link”>link</a>

旧：

您应该使用$location service.将其注入控制器并将其放在$范围(或方便方法)中：

function MainCtrl($scope,$location){
  $scope.goto = function(path){
    $location.path(path);
  }
}

<a ng-click="goto('/path')">Link</a>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!