AngularJS Ui-Router嵌套视图不能与html5mode一起使用

前端之家收集整理的这篇文章主要介绍了AngularJS Ui-Router嵌套视图不能与html5mode一起使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用AngularJS和ui-router,我在使用 Html5Mode时遇到了嵌套视图的问题.这个问题只发生在html5上,如果我没有使用它,一切正常.我尝试使用base< base href =“/”>但没有奏效.

@H_301_8@

此外,问题只发生在嵌套视图中,在主ui视图上没问题.@H_301_8@

这是我正在使用的代码:@H_301_8@

的index.html@H_301_8@

@H_301_8@

<div>
    <ul>
        <li ui-sref="menu">Menu</li>
        <li ui-sref="user">User</li>
        <li ui-sref="contact">Contact</li>
    </ul>
    <div ui-view autoscroll="false"></div>
</div>

儿童template.html@H_301_8@

@H_301_8@

<div class="container">
    <div>
        <ul>
            <li ui-sref="user.data">My Info</li>
            <li ui-sref="user.order">My Order</li>
            <li ui-sref="user.budget">My Budget</li>
        </ul>
    </div>
    <div ui-view></div>
</div>

app.js@H_301_8@

@H_301_8@

.state("user",{
    url: "/User",templateUrl: "content/user.html",controller: "UserCtrl"
})
.state('user.data',{
    url:"/MyData",templateUrl: "content/user/user_data.html",controller: 'UserCtrl'
})

如果我使用html5 WITH`,我可以导航,但是当我刷新页面时,我会收到这样的错误:@H_301_8@

资源解释为样式表,但使用MIME类型text / html进行传输@H_301_8@

如果我使用WITHOUT< base href =“/”/>然后它根本不起作用.但同样,只有孩子的ui-view,父视图仍在工作.@H_301_8@

解决方法

直到现在我还没有遇到这样的问题,所以我的知识有限,但我听到了一些可以帮助你的事情.正如 this ui.router tutorial所说:

@H_301_8@

@H_301_8@

HTML5 Mode@H_301_8@

The UI Router framework gives you ultimate control over the URLs
generated for your site by allowing you to enable HTML5 mode. When
enabled,this mode does not generate hash (#) locations,but uses the
HTML5 history API to generate clean URLs. The only caveat to this
approach is that you must build your application to work under each
generated path,rather than just at the root,which is customary in
most single-page applications.@H_301_8@

我希望这有帮助!干杯.@H_301_8@

猜你在找的Angularjs相关文章