我使用ui-router
。
这是我的嵌套状态:
$stateProvider
.state('books', {
abstract: true,
url: '/books',
controller: 'BooksCtrl',
templateUrl: 'contents/books.html'
})
.state('books.top', {
url: '/top',
templateUrl: 'contents/books-top.html'
})
.state('books.new', {
url: '/new',
templateUrl: 'contents/books-new.html'
});
如何将 books.new
状态设置为 books
抽象状态的默认子状态,然后当您点击 /books
ui-router 重定向到 /books/new
?
最佳答案
我们可以使用内置功能。 1) 默认是具有空 url 的子状态:
$stateProvider
.state('books', {
abstract: true,
url: '/books/new',
controller: 'BooksCtrl',
..
})
.state('books.new', {
//url: '/new',
url: '',
...
})
.state('books.top', {
url: '^/books/top',
...
});
并且 2) 为了保持 /books
就位,我们可以使用重定向
$urlRouterProvider.when('/books', '/books/new');
这些链接将按预期工作:
// href
<a href="#/books">
<a href="#/books/new">
<a href="#/books/top">
//ui-sref
<a ui-sref="books.top">
<a ui-sref="books.new">
检查 it here
关于javascript - 在 ui-router 中设置抽象嵌套状态的默认子项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33036527/