Question

我试图将我的应用程序设置为使用2个布局（一个没有侧边栏，一个有两个侧边栏），这是我的解决方案：

 $stateProvider
            .state('main', {
                url: "/",
                abstract:true,
                templateUrl: "/layouts/main.html"
            })
            .state('sidebars', {
                url: "/",
                abstract:true,
                templateUrl: "/layouts/two-sidebar.html"
            })
            .state('home', {
                parent:'main',
                templateUrl: "/partials/home.html"
            })
            .state('about', {
                url: "about",
                parent:'sidebars',
                templateUrl: "/partials/about.html"
            })

main.html中

<div class="container">
    <div ui-view class="view"/>
</div>

两sidebar.html

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">leftcontent</div>
        <div class="col-md-8">
            <div ui-view class="view"></div>
        </div>
        <div class="col-md-2">rightcontent</div>
    </div>
</div>

我确信有更好的解决方案，但是这一切都很好。唯一的问题是当我第一次访问根页/#/时，我第一次得到一个空白页面，当我点击home时，网址是相同的，但它运行正常。

更清楚一点，就是这里的plunker，看看你必须在外部窗口打开它的问题（预览窗口中的蓝色按钮）：http://plnkr.co/edit/Q4cZM69hn0lutYEYjmxH?p=preview

编辑：看起来主要问题是缺少空网址

.state('home', {
                url:"",
                parent:'main',
                templateUrl: "/partials/home.html"
            })

Answer 1

您已定义两个绑定到同一网址的状态（/）。

根据UI路由器的设计，只应将一个状态绑定到URL。

如果希望有两个具有相同网址的状态，请将第二个状态设置为子状态，并让它在网址中没有任何内容，如下所示：

.state('main', {
            url: "/",
            abstract:true,
            templateUrl: "/layouts/main.html"
        })
        .state('main.sidebars', {
            url: "",
            templateUrl: "/layouts/two-sidebar.html"
        })

Answer 2

像这样改变，

.state('main', {
            url: "/",
            abstract:true,
            templateUrl: "/layouts/main.html"
        })
.state('sidebars', {
            url: "/something",
            abstract:true,
            templateUrl: "/layouts/two-sidebar.html"
        })

空白页面进入应用

2 个答案: