如何删除 angular-ui-router URL 中的“#”符号

Posted

技术标签:

【中文标题】如何删除 angular-ui-router URL 中的“#”符号【英文标题】：How to delete '#' sign in angular-ui-router URLs 【发布时间】：2014-04-01 21:46:04 【问题描述】：

我正在使用 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>

这可行，但是当我从 &lt;a&gt; 标记中删除“#”时，这不起作用。

如何删除 URL 中的“#”号？

【问题讨论】：

我认为你必须使用 HTML5 模式，否则需要使用哈希路由 html5mode=true 或 html5mode=false 【参考方案1】：

如果您想要不带井号标签的导航，则需要启用 HTML5Mode：

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

您还需要通过将以下代码添加到 HTML 文件的 &lt;head&gt; 来告诉 Angular 您应用的根 URL：

<base href="/">

请注意，对 HTML5 模式的支持取决于浏览器。对于不支持 History API 的用户，Angular will fallback to hashbang。

【讨论】：

我还有一个问题。当我粘贴 URL www.example.com/state 时，我没有包含预期内容的页面。我可以用这个做点什么吗？ 这取决于您的服务器。您需要显示与 Angular 应用程序根目录相同的视图。 AngularJs 足够聪明，可以查看 URL 并显示适当的视图/控制器。例如，如果您通常从 /angular 继续您的应用程序，您需要处理以下情况：去 /angular/state 实际上并没有映射到真实的 URL，但实际上是 /angular 中的路由并显示相同查看。 另外不要忘记在 index.html &lt;head&gt; 部分中放置一个&lt;base href="/"&gt; 标签 或者您可以通过将带有 requireBase:false 的定义对象传递给 $locationProvider.html5Mode() 来将 $locationProvider 配置为不需要基本标记： $locationProvider.html5Mode( enabled: true, requireBase: false );见：docs.angularjs.org/error/$location/nobase @SimonBelanger 我正在使用 mvc4 并且我已经为用户特定的模型控制器创建了区域并查看我的登录页面位于 Areas/Admin/View/Home/Index 中，它使用 _Layout 作为主模板如何我应该在 base href 中写 url 吗？【参考方案2】：

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

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

也不要忘记更改基础：

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

【讨论】：

【参考方案3】： 
    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 中的

标签插入 
< base href="/" >

对于CodeIgniter：

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

【讨论】：

以上是关于如何删除 angular-ui-router URL 中的“#”符号的主要内容，如果未能解决你的问题，请参考以下文章

如何仅安装 angular-ui-router.js 文件而不是 npm 的整个源代码解决方案？

(Angular-ui-router) 在解析过程中显示加载动画

Angular-ui-router 详解

angular-ui-router 使用打字稿嵌套命名视图

Angular-ui-router 打字稿定义

Angular Webpack ES2015 组件构建中未触发 angular-ui-router $stateChangeStart 事件