如何在angular-ui-router URL中删除'＃'登录

我正在使用angular-ui-router库，URL出现问题。

我有以下代码：

app.js：

app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
    .state('state', {
        url: '/state',
        templateUrl: 'templates/state.html',
        onEnter: function () {
            /*... code ...*/
        }
    })});

index.html：

<a href="#/state">STATE</a>

这行得通，但是当我从<a>标记中删除“＃”时，此行不通。

如何从网址中删除“＃”符号？

javascript angularjs angular-ui-router

— Niezborala
source

我认为您必须使用HTML5模式，否则需要对路由使用哈希

— 2014年

html5mode = true或html5mode = false

— Ivan Bacher

Answers:

117

如果要导航而没有哈希标签，则需要启用HTML5Mode：

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

您还需要通过向<head>HTML文件的中添加以下代码来告诉angular应用的根URL ：

<base href="/">

请注意，对HTML5模式的支持取决于浏览器。对于不支持History API的用户，Angular将回退为hashbang。

— 西蒙·贝兰格
source

我还有另一个问题。当我粘贴URL www.example.com/state时，没有页面包含预期的内容。我可以做点什么吗？

— Niezborala

这取决于您的服务器。您需要显示与角度应用程序根目录相同的视图。AngularJs很聪明，可以查看URL并显示适当的View / Controller。例如，如果您通常从/ angular进入应用程序，则需要处理以下情况：转到/ angular / state并不会实际映射到真实的URL，而实际上是/ angular中的一条路由并显示相同的内容视图。

— 西蒙·贝朗厄尔2014年

同样不要忘记<base href="https://stackoverflow.com/">在index.html<head>部分中放置标签

— -Saqueib

或者，您可以通过将带有requireBase：false的定义对象传递给$ locationProvider.html5Mode（）来将$ locationProvider配置为不需要基本标记：$ locationProvider.html5Mode（{enabled：true，requireBase：false}）; 请参阅：docs.angularjs.org/error/$location/nobase

— sigmapi13 2015年

@SimonBelanger我正在使用mvc4，因为我已经为用户特定的模型控制器创建了区域，并查看我的登录页面在Areas / Admin / View / Home / Index中，该区域使用_Layout作为主模板，我应如何在base href中编写url？

— 3gth，2016年

如果您使用Angular 1.6+，则还需要hashPrefix从URL中删除：

appModule.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix(''); // by default '!'
  $locationProvider.html5Mode(true);
}]);

不要忘记也要更改基准：

<head>
    ...
    <base href="/">
</head>

— 水仙
source

    yourApp.config(function ($stateProvider, $urlRouterProvider,$locationProvider) {

    $urlRouterProvider.otherwise('/home');

    //add this line in your routing code   
    $locationProvider.html5Mode(true);

    $stateProvider.state('web.home', {
                url: '/home',
                templateUrl: 'pages/home.html',
                controller: 'mainController'         
            })
    }

在您的index.php或index.html中的<head>标记插入中

< base href="/" >

对于CodeIgniter：

<base href=" < ?php echo base_url() ?  >" >

— 维沙尔·纳斯伯恩
source