這里只講思路，不提供代碼。
寫之前，我要先吐槽一種非常奇葩的寫法。 下面是他的寫法思路（雖不提倡，但可借鑒）：
一個商品列表，然后把商品詳情寫在商品列表里。 這是一個頁面，兩個不一樣的div標簽，一個div標簽是商品列表，另一個div標簽是商品詳情
從商品列表跳轉到商品詳情的操作是：
請求商品詳情接口，請求到后賦值（在jq項目里特地引了個vue來雙向綁定），
把當前頁面的高度記錄下來（$document.scrollTop()獲取高度），
然后把商品列表div標簽隱藏掉，然后再顯示商品詳情div標簽。
從商品詳情回退到商品列表的操作是：
點擊商品詳情頁面里回退按鈕 ，觸發toIndex方法，
toIndex方法主要寫的是
隱藏商品詳情div標簽，顯示商品列表div標簽，並用$("html,body").scrollTop(剛記錄的高度) 回退到剛剛的位置
優點：
簡單粗暴。
商品詳情頁，回退到列表，秒回退（回退速度最快，因為是同一個頁面。）。
缺點：
以后擴展功能，只能承認自己技術菜，這實現不了，那實現不了，因為我們沒有商品詳情頁。
沒有瀏覽器回退功能。
代碼冗余程度：每多一個列表頁面，就多上100%。
刷新商品詳情頁后是商品列表頁
上面的寫法，是老項目的寫法，反正我是很不理解這種寫法。
言歸正傳，我們來講其他三種不一樣的寫法吧。（我目前已知的有三種）
一、獨立一個商品詳情頁，商品列表頁跳轉時需緩存數據和高度。（大多數公司正常的寫法，常規寫法）
商品詳情頁和商品列表頁是獨立的兩個頁面。
商品列表頁到商品詳情頁的操作：
記錄當前列表的高度，並緩存，緩存當前列表的列表數據，緩存到sessionStorage（你也可以根據情況緩存到localStorage，cookie） 然后，location.href 跳轉到商品詳情頁。
商品詳情頁回退到商品列表頁的操作：
商品詳情頁，直接是瀏覽器回退，沒其他操作。
商品列表頁，先通過document.referrer判斷來源是不是商品詳情頁， 如果是，則從緩存里取出列表數據和列表高度。 如果不是，則重新請求接口獲取數據。
優點：
1、商品詳情頁只做商品詳情頁的事（商品詳情頁的邏輯統一處理）。
2、刷新商品詳情頁后，回退到列表頁，也記錄列表數據和位置。（不知道算缺點還算優點， 可以特殊問題到時候特殊處理。）
缺點：
1、回退到列表頁的時候，部分瀏覽器 ，會有那么一瞬間，先到頂部再到剛剛瀏覽的高度。
2、如果有個需求是商品詳情頁跳轉到商品列表頁的需求，則會跟我們這里的邏輯有沖突。（特殊邏輯到時候特殊處理。）
二、利用template.js模板引擎寫一個商品詳情頁，掛在列表上。 （從上面那種奇葩式寫法得到的啟發，因為速度最快。 也是我的一種備用方案，真正方案是后面第三種思路。）
template.js模板引擎。寫個商品詳情的模板。
商品列表引入 template.js、商品詳情js模板、商品詳情js邏輯、商品詳情css
商品列表頁到商品詳情頁的操作：
把當前頁面的高度記錄下來（$document.scrollTop()獲取高度），
請求商品詳情接口，請求到后 渲染商品詳情模板，然后插入到商品詳情的div內。
顯示商品詳情div標簽，隱藏商品列表div標簽
商品詳情頁到商品列表頁的操作：
點擊商品詳情頁面里回退按鈕 ，觸發toIndex方法，
toIndex方法主要寫的是
隱藏商品詳情div標簽並清空商品詳情div標簽內的內容，顯示商品列表div標簽，並用$("html,body").scrollTop(剛記錄的高度) 回退到剛剛的位置
優點：
商品詳情模板只做商品詳情頁的事（商品詳情的邏輯統一處理）。
缺點：
1、沒有商品詳情頁。
2、沒有瀏覽器回退功能。
3、刷新商品詳情頁后是商品列表頁。
三、在第二種的方法上，加上瀏覽器攔截，擴展一個商品詳情頁。
第二種方法
1、沒有商品詳情頁。
我們就加一個商品詳情頁的頁面，直接引入template.js、商品詳情js模板、商品詳情js邏輯、商品詳情css。 然后根據url里的參數去請求商品詳情接口。
2、沒有瀏覽器回退功能。
利用window的popstate事件， 來攔截瀏覽器回退和跳轉， 攔截到后，使其執行自己的toindex方法。
3、刷新商品詳情頁后是商品列表頁。
利用history的pushState和replaceState方法 來添加或更改 瀏覽器url地址。
商品列表頁到商品詳情頁的操作：
把當前頁面的高度記錄下來（$document.scrollTop()獲取高度），
請求商品詳情接口，請求到后 渲染商品詳情模板，然后插入到商品詳情的div內。
顯示商品詳情div標簽，隱藏商品列表div標簽， 用pushState改成真正的商品詳情地址，不跳轉（假跳轉），添加history瀏覽記錄
商品詳情頁到商品列表頁的操作：
點擊商品詳情頁面里回退按鈕 或者 使用瀏覽器回退功能（會被攔截的）。 觸發toIndex方法，
toIndex方法主要寫的是
隱藏商品詳情div標簽並清空商品詳情div標簽內的內容，顯示商品列表div標簽，並用$("html,body").scrollTop(剛記錄的高度) 回退到剛剛的位置
商品詳情頁到商品詳情頁的操作：
請求商品詳情接口，請求到后 渲染商品詳情模板，然后插入到商品詳情的div內。
顯示商品詳情div標簽，隱藏商品列表div標簽， 用replaceState替換真正的商品詳情地址，不跳轉（假跳轉），不添加history瀏覽記錄
優點：
1、商品詳情模板只做商品詳情頁的事（商品詳情的邏輯統一處理）。
2、有商品詳情頁，商品詳情頁獨立一個頁面。
3、實現瀏覽器回退功能。
缺點：
1、商品詳情頁刷新后，回退到列表頁，不記錄位置。（這算個缺點）