使用 BASE 标记和 HTML5Mode 时如何在 Angular 中设置根路径？

Posted 2023-02-19

【中文标题】使用 BASE 标记和 HTML5Mode 时如何在 Angular 中设置根路径？

【英文标题】：How do I set root path in Angular when using BASE tag and HTML5Mode?

【发布时间】：2013-01-06 09:58:19

【问题描述】：

鉴于我在 <base href="/test/"> 目录中的 Angular 应用程序的基本示例，将应用程序发送回主（或根）路径的最佳方法是什么？菜单 sn-p（如下）中的所有链接都有效，但是，“主页”链接会导致 IE 在后续请求中重新加载应用程序（具体来说是HomeCtrl）。

app.js

var basic = '<h1>title</h1><p>body</p>';

var app = angular.module('website', []);

app.config( function($routeProvider, $locationProvider) 
    $routeProvider.
        when('/',  template: basic, controller: HomeCtrl ).
        when('/about',  template: basic, controller: AboutCtrl ).
        when('/experiments',  template: basic, controller: ExperimentsCtrl ).
        when('/:alias',  template: basic, controller: PageCtrl, resolve:  alias: resolveAlias  ).
        otherwise( redirectTo: '/' );

    $locationProvider.html5Mode('true');
 );

menu.html

<base href="/test/">
....
<div id="menu">
    <a href="./" class="btn">Home</a>
    <a href="./about" class="btn">About</a>
    <a href="./experiments" class="btn">Experiments</a>
    <a href="./unicorn" class="btn">Unicorn</a>
</div>

更新

对根的每次请求，在IE9中，都会重新运行JS文件，然后触发两次路由事件。

LOG: MainCtrl Loaded!
LOG: routeChangeStart[object Arguments]
LOG: routeChangeSuccess[object Arguments]
LOG: routeChangeStart[object Arguments]
LOG: routeChangeSuccess[object Arguments]
LOG: HomeCtrl Called!

【问题讨论】：

只是为了好玩，更改您的其他指令以重定向到其他地方，看看会发生什么......

【参考方案1】：

来自文档：

redirectTo – (string|function())= – value to update $location path with and trigger route redirection.

所以浏览器重定向是你调用的函数的一部分。

代替：

 redirectTo: '/' 

尝试使用与家乡相同的路线：

 template: basic, controller: HomeCtrl 

我还没有尝试过，因为我现在无法尝试，但如果它有效，请告诉我。