角度路由的可选哈希前缀

Posted 2023-02-22

【中文标题】角度路由的可选哈希前缀

【英文标题】：Optional hash prefix for angular routing

【发布时间】：2017-03-25 17:42:22

【问题描述】：

我目前正在尝试通过实现 _escaped_fragment_-scheme (Google Docs) 使 Angular 应用程序可索引。我知道它已被弃用，但据我所知，经过一些研究和实验后，它仍然是最安全的选择。

该方案需要 hashbang #! 作为“真实 URI”的分隔符和 URI 的角度路由部分，即

http://www.someuri.com/#!/dashboard

目前我使用默认的#：

http://www.someuri.com/#/dashboard

我知道如何更改路由以使用 '#!'：

angular.module('myApp').config([  
    '$locationProvider',
    function($locationProvider) 
        $locationProvider.hashPrefix('!');
    
]);

但是，这显然会破坏“旧”链接（例如 http://www.someuri.com/#/dashboard）。

如何正确路由这两种 URI 格式？

我尝试过这样配置路由：

app.config(function($urlRouterProvider) 
        $urlRouterProvider
            .when('!/imprint', '/imprint')
            .when('!/blog', '/blog')
            .when('!/blog/blogPostId', '/blog/blogPostId');
    );

但它不起作用，我也不能将带有感叹号的状态定义为路由 URI 的第一个字符。

【参考方案1】：

你必须删除！从$locationProvider.hashPrefix('!'); 到$locationProvider.hashPrefix(''); 并添加$locationProvider.html5Mode(true); 并在头部分的索引页面<base href"/"/>