AngularJS：在路由之间转换时防止页面刷新答案

【问题标题】：AngularJS: Prevent page refresh when transitioning between routesAngularJS：在路由之间转换时防止页面刷新
【发布时间】：2015-01-24 18:05:17
【问题描述】：

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

我有一个“家”视图，例如：/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) 当从主页“书籍”页面转换到特定书籍时，页面会刷新。当从一本特定的书转换到另一本书时，模型会在不刷新页面的情况下更新（这是所需的行为）。

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

为了解决问题 2，我在 $location.path() 上设置了一个 $watch，所以如果它发生变化并且与模型不匹配，我会加载正确的项目。这似乎工作正常。

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

【问题讨论】：

标签： javascript angularjs angular-ui-router

【解决方案1】：

将book 设为books 的子级并将其URL 更改为/: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>

【讨论】：

这看起来很有希望。我刚刚切换到使用 ui-router，所以我仍在努力了解它是如何工作的。按原样设置路线后，如果在“书籍”主页上，我需要能够播放部分模板，因此当转到 /books 时，它将播放主要书籍模板和“书籍列表”部分嵌套模板。目前，我通过添加另一个子状态来解决这个问题：/books/home (books.home)。有什么方法可以默认包含子状态，但在查看特定项目时将其关闭？
您可以在超状态中使用其默认内容定义单独的视图，然后从子状态中更改它们。请参阅developer guide。但是，创建同级状态非常好，并且更容易测试。

【解决方案2】：

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

【讨论】：