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