如何从 ui-router 中的 url 地址中删除哈希标签 (#)

Posted 2023-03-05

【中文标题】如何从 ui-router 中的 url 地址中删除哈希标签 (#)

【英文标题】：how to remove hash tag (#) from url address in ui-router

【发布时间】：2016-06-13 13:25:00

【问题描述】：

我的网址看起来像这样 http://127.0.0.1:50884/index.html#/home

这是索引页。我正在使用 angular ui-router 更改为各种视图，但 url 带有 # 标签，如下所示： http://127.0.0.1:50884/index.html#/mobileOperator http://127.0.0.1:50884/index.html#/contentExpertise

问题： 有没有办法从 url.. 中删除/清理 # 标记以显示如下所示的 url 路径：

http://127.0.0.1:50884/index.html/home

http://127.0.0.1:50884/index.html/contentExpertise

我尝试了 html5mode，但它在控制台中给出了角度错误。

Error: [$location:nobase] http://errors.angularjs.org/1.5.0-rc.2/$location/nobase
K/<@http://127.0.0.1:50884/js/angular-v1.5.min.js:6:421
pf/this.$get<@http://127.0.0.1:50884/js/angular-v1.5.min.js:110:96
h/<.invoke@http://127.0.0.1:50884/js/angular-v1.5.min.js:41:293
gb/F<@http://127.0.0.1:50884/js/angular-v1.5.min.js:43:96
d@http://127.0.0.1:50884/js/angular-v1.5.min.js:40:270
e@http://127.0.0.1:50884/js/angular-v1.5.min.js:41:1
h/<.invoke@http://127.0.0.1:50884/js/angular-v1.5.min.js:41:86
gb/F<@http://127.0.0.1:50884/js/angular-v1.5.min.js:43:96
d@http://127.0.0.1:50884/js/angular-v1.5.min.js:40:270
e@http://127.0.0.1:50884/js/angular-v1.5.min.js:41:1
h/<.invoke@http://127.0.0.1:50884/js/angular-v1.5.min.js:41:86
gb/F<@http://127.0.0.1:50884/js/angular-v1.5.min.js:43:96
d@http://127.0.0.1:50884/js/angular-v1.5.min.js:40:270
e@http://127.0.0.1:50884/js/angular-v1.5.min.js:41:1
h/<.invoke@http://127.0.0.1:50884/js/angular-v1.5.min.js:41:86
s/</<@http://127.0.0.1:50884/js/angular-v1.5.min.js:52:121
n@http://127.0.0.1:50884/js/angular-v1.5.min.js:7:364
s/<@http://127.0.0.1:50884/js/angular-v1.5.min.js:52:90
h/<.invoke@http://127.0.0.1:50884/js/angular-v1.5.min.js:41:293
e/<@http://127.0.0.1:50884/js/angular-v1.5.min.js:38:458
h/<.invoke@http://127.0.0.1:50884/js/angular-v1.5.min.js:41:293
gb/F<@http://127.0.0.1:50884/js/angular-v1.5.min.js:43:96
d@http://127.0.0.1:50884/js/angular-v1.5.min.js:40:270
K@http://127.0.0.1:50884/js/angular-v1.5.min.js:71:447
la@http://127.0.0.1:50884/js/angular-v1.5.min.js:60:266
R@http://127.0.0.1:50884/js/angular-v1.5.min.js:58:229
R@http://127.0.0.1:50884/js/angular-v1.5.min.js:58:397
R@http://127.0.0.1:50884/js/angular-v1.5.min.js:58:397
N@http://127.0.0.1:50884/js/angular-v1.5.min.js:56:263
Ac/c/</<@http://127.0.0.1:50884/js/angular-v1.5.min.js:21:99
sf/this.$get</m.prototype.$eval@http://127.0.0.1:50884/js/angular-v1.5.min.js:140:363
sf/this.$get</m.prototype.$apply@http://127.0.0.1:50884/js/angular-v1.5.min.js:141:83
Ac/c/<@http://127.0.0.1:50884/js/angular-v1.5.min.js:21:57
h/<.invoke@http://127.0.0.1:50884/js/angular-v1.5.min.js:41:293
Ac/c@http://127.0.0.1:50884/js/angular-v1.5.min.js:20:1
Ac@http://127.0.0.1:50884/js/angular-v1.5.min.js:21:274
de@http://127.0.0.1:50884/js/angular-v1.5.min.js:20:83
@http://127.0.0.1:50884/js/angular-v1.5.min.js:306:372
n.Callbacks/i@http://127.0.0.1:50884/js/jquery-2.2.1.min.js:2:27060
n.Callbacks/j.fireWith@http://127.0.0.1:50884/js/jquery-2.2.1.min.js:2:27828
.ready@http://127.0.0.1:50884/js/jquery-2.2.1.min.js:2:29619
J@http://127.0.0.1:50884/js/jquery-2.2.1.min.js:2:29804
"

请帮忙

【问题讨论】：

看这个:) ***.com/questions/28388860/…

使用这个 :: $locationProvider.html5Mode(true);

【参考方案1】：

为了使 html5 模式正常工作，您必须定义一个 baseurl，例如：

<base href="whatever/" />

查看 w3schools 了解更多信息：http://www.w3schools.com/tags/tag_base.asp

【讨论】：

它对你的 whatever 有帮助，在我们的例子中是 base_url()

【参考方案2】：

默认情况下，AngularJS 将路由带有标签的 URL。 在 AngularJS 中使用 $locationProvider 很容易获得干净的 URL 并从 URL 中删除主题标签。 您需要将$locationProvider 注入模块的配置部分并像这样使用HTML5 History API。 例如

app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) 
    $stateProvider
        .state('home', 
            url: '/home',
            templateUrl: 'partial-home.html'
        )
        .state('about', 
            url: '/aboutus',
            templateUrl: 'aboutus.html'   
        );
    $locationProvider.html5Mode(true);
);

另外不要忘记在 index.html 部分中添加<base href="/"> 标签。

【讨论】：

现在我的 url 看起来像 127.0.0.1:49625/home 但是在添加这个之后，如果我按刷新我会收到消息“无法获取 /home”，即使我再次返回它，同样的消息也来自其他 url。

现在你需要重写你的 url。让我知道你在使用 angularJS 的服务器端技术

我在本地服务器上使用支架.io。这是 git repo github.com/vipul-verma/naysa

同样在原始 git 上它没有加载视图请帮助这里的链接：rawgit.com/vipul-verma/naysa/master/index.html

使用这个 $locationProvider.html5Mode(true) 需要在服务器端重写 URL，基本上你必须重写所有指向应用程序入口点的链接（例如 index.html）。