Question

之前我遇到过一个问题，我想在以编程方式更新网址时阻止网页刷新。

我有一个“家”视图，例如：/ books和我有特定的观点：例如：/ books / 123

主页有几个侧面板和一个带有书籍列表的主面板。点击一本书时，我只想更新主面板，保留页面的其余部分，但我想更新URL以反映所加载的书。所有书籍都应该是可以直接链接的，因此URL反映了这个直接链接。我在加载特定书籍时通过设置$ location.path（）来更新URL，并且在我的ui-router状态下使用reloadOnSearch：false来阻止刷新。

我的路线设置如下：

.state('books', {
   url: '/books',
   title: 'Books',
   templateUrl: CONFIG.static_url + '/html/book.html',
   controller: 'BookCtrl'
})
.state('book', {
   url: '/books/:itemId',
   title: 'Books',
   templateUrl: CONFIG.static_url + '/html/book.html',
   controller: 'BookCtrl',
   reloadOnSearch: false
})

这很好用，但它有两个问题。

1）当从主页“书籍”页面转换到特定书籍时，页面IS将刷新。从一个特定书籍转换到另一个特定书籍时，模型会更新而不刷新页面（这是所需的行为）。

2）使用浏览器后退/前进控件时，URL中的更改不会反映在模型中，因此视图不会更新。但是，它在转换到主页/从主页转换到特定页面时确实有效。

要修复问题2，我在$ location.path（）上设置了$ watch，所以如果它改变并且与模型不匹配，我会加载正确的项目。这似乎工作正常。

然而，问题1仍然存在。如何在不保留整个页面的同时无缝地从主页转换到特定视图，同时还保留浏览器后退/前进功能？我可以继续使用$ watch功能根据URL进行更新，但我似乎无法在没有页面刷新的情况下加载它。

Answer 1

让book成为books的孩子，并将其网址更改为/:itemId。
不要手动设置$location.path()，因为这会强制刷新。使用ui-sref指令或$state.go()函数在状态之间重定向。

尝试这样的事情：

.state('books', {
    url: '/books',
    // ... (template should contain <div ui-view></div> where sub-state content will be rendered)
})
.state('books.book', {
    url: '/:itemId',
    // ... (template and controller just for this sub-state; will get rendered into super-state's ui-view)
})

并像这样链接：

<a ui-sref="books.book({itemId:123})">Book 123</a>

Answer 2

你需要将这本书作为书籍的儿童状态。通过使用它，您可以实现所需的行为，因为书籍html已经可用于路线。我希望这会奏效。

AngularJS：在路由之间转换时阻止页面刷新

2 个答案: