我在这里问了一个类似的案例，但后来我发现这并不是我想要做的:
这是一个新版本:
HTML
<body ng-app="plunker">
<div>
<a ui-sref="admin">Admin</a>
<a ui-sref="user">User</a>
</div>
<div ui-view></div>
</body>
JS
var app = angular.module('plunker', ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider
.when('/', '/admin/dashboard')
.when('/admin', '/admin/dashboard')
.when('/user', '/user/dashboard')
.otherwise('/admin/dashboard');
$stateProvider
.state('admin.dashboard', {
url: '/admin/dashboard',
resolve: {
test: function() {
console.log('called admin');
return;
}
},
template: '<div>admin navigation. Go <a ui-sref="admin.link1">link1</a></div>'
})
.state('admin.link1', { //for some reason admin.link1 does not work but just link1 is OK
url: '/admin/link1',
resolve: {
test: function() {
console.log('admin.link1 called resolve');
return;
}
},
template: '<div>admin link1</div>'
})
.state('user', {
url: '/user/dashboard',
template: '<div>user dashboard</div>'
});
});
代码:http://plnkr.co/edit/NYdWC1j9xskQnY8LjJkZ?p=preview
要求
我不需要为父路由呈现任何内容 (
admin)默认重定向为
/admin/dashboard我需要将 url 正确构造为
/admin的子级因为上一个问题，结果是/admin/dashboard/admin/link1我确实需要
admin和userparent 。需要 child 的关系。这个以后会用到。
问题
现在我无法显示像
admin.dashboard这样的子路由.它只是空白。如何显示dashboard默认情况下？如果我添加下面的行来显示
admin模板，甚至这个ui-sref="admin.dashboard"不会带我去正确的dashboard子路由
javascript
.state('admin', {
url: '/admin',
template: '<div>admin. Go <a ui-sref="admin.dashboard">dashboard</a></div>'
})
最佳答案
有一个updated plunker .为了简单起见，我首先更改了状态的名称'admin.dashboard'进入:
.state('admin_dashboard', {
url: '/admin/dashboard',
...
原因是，任何点在这里都被视为子状态。我们现在可以(但不是必须)介绍admin 的子状态，以解释如何调用它state。妥妥的……
这些是<a> 内部的调用 中的重要变化。
不 工作 ui-sref(原始)
<div>
<a ui-sref="admin">Admin</a>
<a ui-sref="user">User</a>
</div>
工作 ui-sref
<div>
<a ui-sref="admin_dashboard">Admin</a>
<a ui-sref="user">User</a>
</div>
工作 href
<div>
<a href="#/">Admin as <samp>'/'</samp></a>
<a href="#/admin">Admin as <samp>'/Admin'</samp></a>
<a href="#/user">User</a>
</div>
正如我们所见，ui-sref必须包含州名，而 href可以(必须)包含 url，即使是在 when() 中定义的那个
检查更新的 example ...
更新:
如果我们想和父子一起去，我们可以这样设置
$stateProvider
.state('admin', {
url: '/admin',
template: '<div>admin. Go <a ui-sref="admin.dashboard">dashboard</a>' +
'<div ui-view=""></div>' +
'</div>'
})
.state('admin.dashboard', {
url: '/dashboard',
resolve: {
test: function() {
console.log('called admin');
return;
}
},
template: '<div>admin navigation. Go <a ui-sref="admin.link1">link1</a></div>'
})
.state('admin.link1', {
url: '/link1',
resolve: {
test: function() {
console.log('admin.link1 called resolve');
return;
}
},
template: '<div>admin link1</div>'
})
.state('user', {
url: '/user/dashboard',
template: '<div>user dashboard</div>'
});
这些就是 anchor
不 工作 ui-sref(原始)
<div>
<a ui-sref="admin">Admin</a>
<a ui-sref="user">User</a>
</div>
工作 ui-sref
<div>
<a ui-sref="admin.dashboard">Admin</a>
<a ui-sref="user">User</a>
</div>
工作 href
<div>
<a href="#/">Admin as <samp>'/'</samp></a>
<a href="#/admin">Admin as <samp>'/Admin'</samp></a>
<a href="#/user">User</a>
</div>
和更新的plunker
关于javascript - 将子路由设为默认，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24922311/