資訊專欄INFORMATION COLUMN
摘要：認識中的舉個栗子，代號為。對應下的組成沒錯，后面的部分也叫做，帶有的也叫。這里等同于在左邊的代表這個資源在服務器的位置，右邊的則是指明資源內的位置，可以理解成就是錨點。這樣子我們只要為這個鏈接返回相應的頁面或者數據即可。
參考鏈接：6 Things You Should Know About Fragment URLs
在項目開發中，因為使用了Vue.js來開發一個SPA（單頁面應用），所以在這個項目開始變大的時候，很自然的就想到用vue-router來建立多個模塊入口。vue-router默認的是使用hash模式，就是會在#后面跟著路徑用來區分并渲染相應的組件，還有一種是history模式，這種模式能在不刷新當前頁面的情況下改變URL，并且形式非常干凈清爽的，比如：https://segmentfault.com/u/zh...，帶上了hash就可能是 https://segmentfault.com#!/u/zhoushx3。
開發過SPA網站的朋友應該知道，SPA是SEO不友好的（后面會解釋）。我們一般是會根據URL的路徑或者hash來渲染對應的組件或頁面。打個比方：
網站首頁：aa.bb.com/index
點擊頁面某一按鈕，修改window.location.hash="#how"，URL變成aa.bb.com/index#how，同時通過ajax或者其他方式獲得數據并渲染。
點擊另一按鈕，修改window.location.hash="#what"，URL變成aa.bb.com/index#what，同時頁面更新渲染。
上面我舉的栗子是使用hash。當然也可以使用如下的history模式，比如：
網站首頁：aa.bb.com/index
點擊頁面某一按鈕，執行history.pushState({}, "", "/how")，URL會變成aa.bb.com/how
點擊頁面某一按鈕，執行history.pushState({}, "", "/what")，URL會變成aa.bb.com/what
使用這種方式URL就會更好看點。
好像有點扯遠了，其實我只是想找個引子帶出hash這貨而已，開始。
認識URL中的Hash舉個栗子：http://www.zuodanye.com/pcent...，代號為W。
對應下URL的組成：protocol :// hostname[:port] / path / ;parameters#fragment
沒錯，#后面的部分也叫做fragment，帶有#的URL也叫Fragment URL。
這里fragment等同于hash.
在#左邊的代表這個資源在服務器的位置，右邊的則是指明資源內的位置，可以理解成就是錨點。比如標簽的用法，，當點擊它的時候屏幕會滾到它的位置。
check it out:
據說是因為Fragment部分只對瀏覽器有用，也就是前端，并且它不會對服務器返回什么資源有所影響，所以這個部分就在Request URL中被忽略掉了。
所以如果把?key=value這部分放在了#后面，那么服務器在拿GET參數的時候就拿不到這塊了的哦。
修改window.location.hash也就是#后面并不會導致頁面刷新，這一點在優化用戶體驗上是大大的好。
雖然頁面不會刷新，不過會在瀏覽器的history記錄中添加一條記錄，所以返回和前進按鈕就可以利用了。
Google爬蟲在爬網站的時候，HTML中的內容和內嵌的鏈接會成為搜索索引的一部分。由于它并不具有一個腳本引擎，所以它只會爬網站的源碼而不會執行任何腳本，這樣子#后面的部分就完全失去了作用，畢竟#只有javascrip才會去使用到。
所以，如果使用AJAX和#來區分路徑的話，這樣的路徑是不會被收錄到索引的。為了解決這個問題，Google支持了一種轉化，即爬蟲會把hash部分識別成URL參數，方式：
首先需要把#變成#!，即 http://www.zuodanye.com/pcent... ==> http://www.zuodanye.com/pcenter#!myProject
當Google爬蟲遇到這樣的URL，會將其識別成 http://www.zuodanye.com/pcent...。
這樣子我們只要為這個鏈接返回相應的頁面或者數據即可。
不過這種方式還是顯得略不好看，所以如果瀏覽器支持history API的話，當然還是用history的好。
總結如果SPA網站要對SEO友好點的話，應該至少有下面的部分：
利用history.pushState來修改URL，監聽onpopstate來相應返回和前進。
URL的變化可能如下：www.zuodanye.com -> www.zuodanye.com/pcenter -> www.zuodanye.com/home
這個過程中頁面不會刷新，用戶體驗好。
server路由添加/pcenter和/home，以及對應的Render頁面，這樣子就可以為不同路徑下的頁面編寫不同的TDK。
如果瀏覽器不支持histroyAPI，那就降級使用hash來切換不同的路徑，這樣子至少能夠不刷新跳轉，優化體驗。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/80796.html
摘要：設計設計意義前后端分離減輕服務器壓力增強用戶體驗預渲染優化前后端分離前端做業務邏輯，后端處理數據和接口，耦合度減少，開發效率提高。響應瀏覽器的前進和后退。代碼實現演示圖結上就是設計原理愿你成為終身學習者 SPA設計 1、設計意義 前后端分離 減輕服務器壓力 增強用戶體驗 Prerender預渲染優化SEO 前后端分離：前端做業務邏輯，后端處理數據和接口，耦合度減少，開發效率提高。 ...
摘要：設計設計意義前后端分離減輕服務器壓力增強用戶體驗預渲染優化前后端分離前端做業務邏輯，后端處理數據和接口，耦合度減少，開發效率提高。響應瀏覽器的前進和后退。代碼實現演示圖結上就是設計原理愿你成為終身學習者 SPA設計 1、設計意義 前后端分離 減輕服務器壓力 增強用戶體驗 Prerender預渲染優化SEO 前后端分離：前端做業務邏輯，后端處理數據和接口，耦合度減少，開發效率提高。 ...
摘要：為了解決問題，推出了服務端預渲染，以便提高對優化。應用，到了，單頁面應用優秀的用戶體驗，逐漸成為了主流，頁面整體式渲染出來的，稱之為客戶端渲染?？蛻舳私邮諗祿?，然后完成最終渲染。通過對客戶端服務端基礎框架的抽象組織，主要關注的是應用的渲染。 現在前端開發一般都是前后端分離，mvvm和mvc的開發框架，如Angular、React和Vue等，雖然寫框架能夠使我們快速的完成開發，但是由于前...
摘要：官方地址設置單頁面信息，如果需要單頁面，可以和形成更優的配合單頁面應用在前端正大放光彩。隨著單頁面應用的普及，人們在感受其帶來的完美的用戶體驗，極強的開發效率的同時，也似乎不可避免的要去處理的需求。 vue-meta-info 官方地址： https://github.com/monkeyWang... （設置vue 單頁面meta info信息，如果需要單頁面SEO，可以和 prer...
摘要：官方地址設置單頁面信息，如果需要單頁面，可以和形成更優的配合單頁面應用在前端正大放光彩。隨著單頁面應用的普及，人們在感受其帶來的完美的用戶體驗，極強的開發效率的同時，也似乎不可避免的要去處理的需求。 vue-meta-info 官方地址： https://github.com/monkeyWang... （設置vue 單頁面meta info信息，如果需要單頁面SEO，可以和 prer...
閱讀 2171·2023-04-26 00:43
閱讀 2689·2021-11-22 15:22
閱讀 3826·2021-11-11 16:55
閱讀 977·2021-11-04 16:06
閱讀 1792·2019-08-30 14:12
閱讀 1004·2019-08-30 14:02
閱讀 3376·2019-08-29 17:05
閱讀 1422·2019-08-29 12:27
