使用 <a href="/#/xyz> 而不是 <a ui-sref="primary"> 使用 ui-router 更改状态

Question

我正在使用 AngularJs V1.6。 Ui-路由器 V 1.0.3

在过去的几周里，我一直在尝试学习如何使用 ui-router，但今天我遇到了这段代码，这让我完全困惑：-

HTML端-

<ul ng-if="!isAuthenticated()" class="nav navbar-nav pull-right">
    <li><a href="/#/login">Login</a></li>
    <li><a href="/#/signup">Sign up</a></li>
</ul>

JS -

$stateProvider
  .state('home', {
    url: '/',
    controller: 'HomeCtrl',
    templateUrl: 'partials/home.html'
  })
  .state('login', {
    url: '/login',
    templateUrl: 'partials/login.html',
    controller: 'LoginCtrl',
    resolve: {
      skipIfLoggedIn: skipIfLoggedIn
    }
  })

这是来自Satellizer 的代码。

我尝试复制它，但它所做的只是在浏览器中向我显示我的工作目录的文件夹结构。 但是，我使用的是 ui-router 可视化工具，单击其中的路线后，它可以正常工作。我找不到任何以这种方式使用 ui-router 的示例，上面的 sn-p 究竟是如何工作的？

我也看到here那个打字

<a ui-sref="party">Go To Party</a> 

会把它变成

<a href="/party" ui-sref="party">Go To Party</a> 

在我们的浏览器中。但是，在我最初发布的示例中，没有带有 href 的 ui-sref。再一次，究竟发生了什么或究竟发生了什么？它只是因为它正在检索一个单独的html文件而起作用吗？

Answer 1

我尝试复制它，但它所做的只是向我显示文件夹 我在浏览器中的工作目录的结构。

发生这种情况是因为您问题中的第一个示例对生成的链接使用哈希前缀，而第二个示例对链接使用 html5Mode。

当您单击带有哈希前缀模式的链接时，例如。 #/home，该资源的请求由 ui-router 在客户端处理，不会发送到服务器。但是，当您单击没有前缀的链接时，例如。 /home，请求发送到服务器。您的服务器需要了解此类请求（请查看下面的参考链接）。

默认模式生成# 作为前缀。如果您不想在生成的链接中使用哈希前缀 #，那么您需要像这样启用 HTML5Mode：

app.config(["$locationProvider", function($locationProvider) {
  $locationProvider.html5Mode(true);
}]);

如果你启用了这个模式，那么不要忘记通过在你的 HTML 文件的 head 部分添加以下内容来通知 Angular 你应用的根 URL：

<base href="/">

参考：

• Read more about how to configure your server to work with html5Mode here.

关于ui-sref指令：

在 HTML 模板中使用 ui-router 进行路由/状态解析的首选方式是使用ui-sref，这是一个将链接（即锚标记（tag））绑定到状态的指令。如果一个状态有关联的 URL，该指令将自动生成，为您更新 href 属性。

这样，您的 HTML 模板只需要引用一个状态名称，并且将为您完成链接解析，这很好，就像您将来更改状态的底层链接一样，您的模板仍然可以工作。该指令使用$state.href() 方法作为链接值。

您可以直接使用锚标记中的关联链接，而无需使用该指令。但是这样做，如果您更改路由配置中的 url，您将始终需要修改您的链接。让 ui-router 模块帮助您管理这个，而无需编写任何额外的代码行并简化状态管理。

该指令的用法是：

• ui-sref='stateName' - 导航到状态，没有参数。 'stateName' 可以是任何有效的绝对或相对状态，遵循与$state.go() 相同的语法规则
• ui-sref='stateName({param: value, param: value})' - 使用参数导航到状态。

示例：如果您的 html 有以下链接：

<a ui-sref="home">Home</a>

如果您的路由配置具有名为 home 的有效状态，则生成的 HTML（Html5Mode 关闭导致前置“#”）将如下所示：

<a href="#/home" ui-sref="home">Home</a>

参考： - UI Router ui-sref directive

Answer 2

使用时你正在编写这个路由示例

<a href="/home">Home </a>

您必须在路由中编写此代码

 $locationProvider.html5Mode(true)

This link can help you