在每个页面中使用嵌套视图时如何使用 ui-router 进行页面重定向？
Posted
技术标签:
【中文标题】在每个页面中使用嵌套视图时如何使用 ui-router 进行页面重定向？【英文标题】：How to do page redirection using ui-router when using nested view in each page? 【发布时间】：2016-09-02 12:59:03 【问题描述】：我正在使用 ui-router，它适用于单页，因为我在多个子视图中破坏了我的页面，每个子视图都有自己的控制器。现在我有两个这样的页面，但无法弄清楚如何使用 ui-router 重定向到另一个页面。
$stateProvider
.state('main',
url: '/',
views:
'':
templateUrl: 'index.html',
controller: 'projectInitCtrl',
,
'tab_overview':
templateUrl: 'assets/views/part_page.html',
controller: 'tabOverviewCtrl',
)
.state('dashboard',
url: '/dashboard',
views:
'':
templateUrl: 'main.html',
controller: 'projectInitCtrl',
,
'tab_overview':
templateUrl: 'assets/views/part_page_1.html',
controller: 'tabOverviewCtrl',
);
$urlRouterProvider.otherwise('/');
我可以使用 localhost:9000（我正在运行我的应用程序的端口）访问/，现在如何重定向到 /dashboard？
我正在使用 angularjs。如果不使用 ui-router，是否可以建议我使用其他方法来实现这一目标？
【问题讨论】：
当你说重定向时，你的意思是改变默认状态吗？ $urlRouterProvider.otherwise('/') 应该可以解决问题。 我的意思是转到另一个页面。默认状态已经存在，所以当我尝试打开 localhost:9000/#/dashboard 时，它会将我带到默认页面。 Your code works? (click to see plunker) @Dan 感谢代码，但即使在这个代码中，我们也不仅仅显示 main.html 的内容。当您单击链接时，我只想显示 main.html 的内容而不显示其他内容。我假设 main.html 正在使用 part_page_1.html 作为 ui-view。如果我的理解不正确，请告诉我。当我说重定向时，我的意思是我们完全切换到新页面而不是仅重定向页面的一部分。 嘿，我可以通过使用 ui-view="" 并根据页面更改 ui-view 来解决问题，但我真正想要的是更改完整页面，以便我可以在每个页面中使用多个 ui-view页。这样每个组件都有自己的控制器，我可以在多个页面上重用它们。 【参考方案1】：您似乎想要一个简单的带有home 和dashboard 的两条路由应用程序。
你的代码是正确的，你只需要简化相应的html：
<body>
<div ui-view=""></div>
</body>
另外，为避免出现问题，我建议不要将您的 / 路由指向 index.html，因为 index.html 应该是您的应用程序主页，并且在 ui-view 中重新加载它可能会导致奇怪的行为.
有了这两点，回家将显示index.html（按照上述点的两倍），转到仪表板将显示main.html。
关键是 ui-view 标记是当您转到 /#dashboard 时显示视图的位置。
这是一个更新的plunker - 请注意，plunkers url 路由不能理想地工作，因此需要链接，否则您可以删除它们。
就目前而言，您的代码似乎期望每个 url 有两个视图，这就是为什么原始 plunker 同时具有 ui-view="" 和 ui-view="tab_overview"，并在您切换 url 时显示两行信息。
【讨论】：
谢谢丹。这解决了我目前的问题。现在我正在考虑 ui-view 内的 ui-view 以使其更加优化。 :) 您需要为此使用嵌套状态：例如dashboard.tabs_overview。这仅在页面具有多个嵌套状态时才有意义，否则没有意义 - 只需让视图具有选项卡概览即可。
同意。你知道一些链接，我可以从中学习嵌套状态（更像是 ui-view 内的 ui-view）。
quickstart 有一个link to an example。以上是关于在每个页面中使用嵌套视图时如何使用 ui-router 进行页面重定向？的主要内容，如果未能解决你的问题，请参考以下文章
Angular ui-router - 如何访问从父模板传递的嵌套命名视图中的参数？
AngularJS UI-Router - 何时使用子/嵌套状态