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

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

我有一个“主”视图，例如：/books，我有特定视图：例如：/books/123

主页有两个侧面板和一个包含书籍列表的主面板。 当点击一本书时，我只想更新主面板，保持页面的其余部分不变，但我确实想更新URL以反映加载的书。所有书籍都应该可以直接链接，因此URL反映了这种直接链接。在加载特定书籍时，我通过设置$location.path（）来更新URL，并在ui路由器状态中使用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） 当从主页“Books”页面转换到特定的书籍时，页面将刷新。当从一本书转换到另一本书时，模型会更新而不刷新页面（这是所需的行为）

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

为了解决问题2，我在$location.path（）上设置了一个$watch，因此如果它发生了变化并且与模型不匹配，我将加载正确的项。这似乎效果不错

---

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

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

使

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>

.state（'books'{
url:“/books”，
//…（模板应包含呈现子状态内容的位置）
})
.state（'books.book'{
url:“/：itemId”，
//…（仅此子状态的模板和控制器；将呈现到超级状态的ui视图中）
})

链接如下：

.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>

第123册

这看起来很有希望。。我刚刚改用ui路由器，所以我仍在努力弄清楚它是如何工作的。在我的路线按原样设置后，如果在“books”主页上，我需要能够播放部分模板，因此当转到/books时，它将播放主图书模板和“图书列表”部分嵌套模板。目前，我已经通过添加另一个子状态：/books/home（books.home）解决了这个问题。是否有某种方法可以在默认情况下包含子状态，但在查看特定项目时将其关闭？您可以使用其默认内容在超级状态中定义单独的视图，然后将其从子状态更改。看。然而，创建兄弟状态是非常好的，并且测试更容易。