ui-route實現頁面跳轉回來頁面不重新載入？

01-04

最近用angular、require做一個項目，路由用的ui-route，發現頁面跳轉的時候，數據都得重新載入和渲染一遍。比如我從首頁（類似瀑布流）進入詳情頁，然後返回首頁，這時候首頁又得重新請求一遍數據，之前滾動的位置也消失了。數據緩存可以在$http裡面設定，但是每次頁面都要重排和重繪，這個有辦法解決么，還是我哪些地方出錯了？？
angular版本為1.4，包管理工具bower，構建工具：gulp

所謂的路由，其實也是儘可能對類似「url」操作的一種兼容。即使是一個單頁應用，全系統只有一個頁面，每個功能狀態也可能對應到一個url上，那我們從這個角度看它的行為：

首頁到詳情頁：這一步可以看做是一個新鏈接的跳轉，因為原先並不存在詳情頁的一切，它的數據和界面都是重新創建的，這個你也是認同的。

詳情頁回到首頁：這個「回到」，可以有兩種理解方式，一種是點擊一個鏈接跳回來，一個是按瀏覽器的後退按鈕。這兩種行為表達的含義應該是不一樣的。

先考慮一個問題，當你已經進入詳情頁面的時候，首頁的東西還是否存在了？無論界面還是controller實例，其實都不在了，為什麼要這麼設計？對一個單頁系統來說，如果它不銷毀已離開的東西，把每個頁面點一遍之後，整個系統的所有模塊就都實例化了，這時候系統資源的佔用很大是一方面，狀態不易同步更是一個可怕的事情，所以會銷毀已離開的頁面。

從另外一個角度講，既然應用的狀態與url是對應的，那你就不應當區分這兩種情形：

- 從已有的某界面點擊另外一個界面A對應的url，訪問A

- 從新建瀏覽器地址欄直接輸入A的url，訪問A

這兩者應當是等同的，它對上一個操作界面應當是沒有依賴的。

在這種考慮下，滾動條位置更是不可能保留，除非是點擊瀏覽器的後退機制，他幫你做些額外的東西。

面對你這個業務場景，可以不用路由，而是使用ng-if或者ng-show這樣的東西來切換不同界面，點擊的時候自行控制狀態與界面的對應關係。

為什麼一直會有很多同學邀請我回答 Angular 路由的問題... 而我並不熟啊...

不過幫忙翻了下 GitHub, 找到了一個有些年紀的 Issue. Optional support for keeping a view around · Issue #63 · angular-ui/ui-router · GitHub

Issue 中有很多相關的討論但是太長我沒細看, 不過靠後有一個 Owner 的回答:

We don"t currently have any MDI-like (Multiple Document Interface) capabilities. I don"t know of any existing implementation patterns using ui-router.

所以估計題主你得想其他辦法了.

這要取決於你的首頁路由和詳情頁路由的關係了，目測你目前應該是平級關係，如果是平級關係，來回切換當然整個 ui-view 區域都重新渲染了。

如果要做到首頁進入詳情頁再返回首頁，首頁的內容還在不丟失，那就需要把詳情頁設置為首頁路由的子，這樣從首頁進詳情頁面首頁的內容都還在，只是首頁嵌套的ui-view區域變成了詳情頁的內容，再從詳情頁回首頁，只是首頁嵌套的ui-view區域內容沒有了，原有首頁裡面所有的內容都還在，如果這麼做，首頁的數據就需要實時刷新系統更新。

但是我們一般的需求是首頁和詳情頁的內容完全不同，不可能進入詳情首頁的內容還完全保留，解決這個問題也是有2個方案的：

1. 和上面設置路由的關係一樣，當進入到詳情頁的時候，隱藏首頁其他內容區域，比如列表，切換到首頁的時候再把首頁內容區域顯示出來，這樣來回切換基本不會重新載入首頁的數據了；

2. 在首頁和詳情路由上設置一個虛擬的路由，進入首頁的時候默認去的是列表頁面，這個虛擬路由是列表路由和詳情路由的父，你把數據載入的部分放在這個虛擬路由上，這樣你在列表和詳情頁面切換，這個虛擬路由是不會變的，但是從詳情頁進入列表頁只是數據不重新載入了，整個DOM還是重新載入的，要想滾動條保留就需要把滾動的位置保存下來，每次進入列表頁面自動滾動到上次的位置。

關於上面說的所有東西ui-router官方的示例已經把所有東西都展示出來了 ui-router

樓主，我想問下，我用angular的路由，現在我點擊瀏覽器的後退按鈕想回到上一個頁面。但上一個頁面不顯示，一直保留在當前頁面。這個要怎麼處理，我想點擊回退後，讓上一個頁面顯示。求回復，謝謝

遇到過同樣的問題，推薦這個：christopherthielen/ui-router-extras · GitHub 切換路由時可以保持狀態信息，原理其實就是路由跳轉後把原試圖hidden了，狀態信息還在