ASP.NET MVC AngularJS SPA URL 路由无法解析为正确的视图答案

【问题标题】：ASP.NET MVC AngularJS SPA URL routing not resolving to correct viewASP.NET MVC AngularJS SPA URL 路由无法解析为正确的视图
【发布时间】：2023-03-15 21:35:01
【问题描述】：

我正在尝试让 URL 路由跳转到角度 spa 设置中的正确页面/视图

我有一个索引页面设置，例如：

<html data-ng-app="app">
  <body>
    <div>
      <div data-ng-include="'/app/layout/shell.html'"></div>
    </div>
  </body>
</html>

一个shell页面，如：

<div data-ng-controller="ShellCtrl as vm">
<header>
    <div data-ng-include="'/app/layout/topnav.html'"></div>
</header>
<section id="content" class="content">
    <div data-ng-view></div>
</section>
</div>

topnav.html 包含一个导航栏，其中包含指向不同页面的链接，例如：

 <ul class="nav navbar-nav"> 
            <li class=""><a href="#/about"><span class="glyphicon glyphicon-info-sign"></span> About</a></li>
        </ul>

现在当我点击关于链接时，它会在内容部分加载我的关于页面，就像它应该创建 URL 一样

http://localhost/#/about"

我的 routeprovider 设置如下：

app.config(['$routeProvider', '$locationProvider',
  function ($routeProvider, $locationProvider) {
      //$locationProvider.html5Mode(true);

      $routeProvider.
       when('/', {
           templateUrl: 'app/partials/home.html',
           controller: "HomeCtrl"
       }).
        when('/about', {
            templateUrl: 'app/partials/about.html',
            controller: 'AboutCtrl'
        }).
        when('/contact', {
            templateUrl: 'app/partials/contact.html'
        }).
        otherwise({
            redirectTo: '/'
        });

  }]);

现在我可以切换到我的应用程序中的页面，但是每当我将 url 放入新窗口以“书签”到 about 页面时，它不起作用，它不会加载 about 视图。事实上，当我刚刚加载时

http://localhost/

一开始它也不会加载我的主页视图。

我是否错过了一个关键部分，无法让 URL 路由从 URL 正确加载我的视图？

【问题讨论】：

不是所有的“计算机是否已插入”，但您是否清除了缓存？我问是因为我看到了 //html5mode。 “localhost”的默认页面是什么？（html、chtml等）
是的，我已经尝试清除缓存。我的默认页面是 index.html
我不太明白是什么导致了我的问题，如果我包含 app.run(['$route', function ($route) {}]);这似乎纠正了一些事情并允许 url 路由做它的事情。这是对框架的要求，还是我在途中的某个地方设置不正确，我正在使用 app.run 行进行创可贴

标签： asp.net-mvc angularjs routing

【解决方案1】：

在你的角度 href 之前添加一个“/”，如下所示：

<ul class="nav navbar-nav"> 
        <li class=""><a href="/#/about"><span class="glyphicon glyphicon-info-sign"></span> About</a></li>
</ul>

【讨论】：

【解决方案2】：

请记住，如果您使用的是 Angular Js，则所有页面加载等都在 index.html 页面中。

如果您直接从 url 加载页面，它将不会加载，因为它需要一些 javascript，如路由、配置等才能运行，并且这些都与您的 index html 页面相关联。

你可以在你的属性窗口中指定一个启动页来#。

希望这能回答你的问题

【讨论】：

您能否通过添加一些示例代码来改进您的答案？