Angular $stateProvider - 不匹配路由或“空白”路由

Posted

技术标签:

【中文标题】Angular $stateProvider - 不匹配路由或“空白”路由【英文标题】:Angular $stateProvider - match no route or 'blank' route 【发布时间】:2017-11-06 21:48:22 【问题描述】:

我使用 $stateProvider 的角度如下:

var stateConfig = function ($stateProvider, $urlRouterProvider) 

    // Redirect if no route
    $urlRouterProvider.otherwise("");

    $stateProvider.state("home.myState", 
        url: "",
        templateUrl: "/mytemplate.html",
        controller: "MyController"
    );
;

... 这适用于这样的 .NET MVC url(没有定义角度路由):

http://hostname/MvcController/id

问题是有时 URL 会采用这种形式:

http://hostname/MvcController/id#/

...我可以像这样更改我的状态定义:

    $stateProvider.state("home.myState", 
        url: "/",
        ...

,它与新 URL 匹配,但不再与原始 URL 匹配(没有结尾的 '#/')。我应该如何定义状态,或配置我的路由,以便它匹配一个可以具有“空白”路由(即带有尾随 '#/')或根本没有定义路由(没有尾随 '#/ ')

【问题讨论】:

【参考方案1】:

据我所知,您需要在 app.config 中打开 HTML5 模式:

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

您还必须在标签中设置一个基本网址:

< base href="/" >

【讨论】:

【参考方案2】:

我需要更改为这个,当没有提供路由时将路由设置为具有“/”(然后状态匹配以“/”为后缀的路由)

$urlRouterProvider.otherwise("/");

$stateProvider.state("home.myState", 
    url: "/",
    ...

【讨论】:

以上是关于Angular $stateProvider - 不匹配路由或“空白”路由的主要内容,如果未能解决你的问题,请参考以下文章

Angular 1.5,ui-router + 资源 + 组件,stateProvider 找不到组件

否则在StateProvider上

AngularJS-UI-Router

AngularJS中ui-router全攻略

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

使用 Angular UI-Router 在 Ionic 框架中将状态作为新路由处理