react路由重定向到其他域,reactrouter監聽路由變化_前端路由三種模式

 2023-10-24 阅读 20 评论 0

摘要:hash:任何情況下都可以做前端路由,缺點是SEO不友好(服務器收不到hash,瀏覽器是不會把#后面的內容發給服務器)history模式:后端將所有前端路由都渲染到同一個頁面(不能是404頁面),缺點是IE8以下不兼容。路由:分

hash:任何情況下都可以做前端路由,缺點是SEO不友好(服務器收不到hash,瀏覽器是不會把#后面的內容發給服務器)

history模式:后端將所有前端路由都渲染到同一個頁面(不能是404頁面),缺點是IE8以下不兼容。

路由:分發請求

hash模式

react路由重定向到其他域?#后面的就是hash

舉例:

f379265a745c84e7ae2a47065c66deb0.png

1b297499512c29ea85dc3f592598e30e.png

react 路由?監聽變化

f28fbf61926cd6ce301a92adcedf4b50.png
hash路由的簡單例子?codesandbox.io

默認路由,用戶沒有設置#時

234b7ebf7b8c3f3e9c678a0bcbeee795.png

react 路由跳轉。404路由(保底路由)

90265f74f7995d67ee43f1cb3bc72c42.png

523368cd8d91760456ec62e0f3eb169e.png

優化所有代碼

react動態路由、

3f6c3a0df662428f642cd99dfb991e62.png

路由表

div的對應關系是可以自定義的,做一個hash表,利用表驅動編程

565ac3246aed0c1e9a938db9a0aa66a0.png

container用來使用嵌套路由

react路由原理,

eeac355dfd16b95e0359b7231affbc91.png

history模式

number修改成從pathname里獲取

1c6357af06034b1d1fdb117cd19106f4.png

react router原理、#改成/

7acf402b00f90f7091df2c5a389970d5.png

遍歷所有的a標簽阻止默認動作

f1d3cfb36daeb6dbde1fe37afc7a602e.png

react router config,路徑在不刷新的情況下,改變url進行變更

eb4673425d53d20c5ac717634f0050b9.png

監聽并重新路由

a06eeb095c7cf0c5280c455235b33caa.png

vuerouter、memory模式

首先number不從路徑里獲取,從localStorage里獲取

69e6303e983a17b459dc84233efdeb1f.png

3e29f22b6959f07faef9600e106fd2bc.png

三者區別

hash和history都是把路徑存在url上面,而memory模式路徑沒有放在url上而是在localStorage里,缺點是沒有url是一個單機版的路由

版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接:https://hbdhgg.com/5/163830.html

发表评论:

本站为非赢利网站,部分文章来源或改编自互联网及其他公众平台,主要目的在于分享信息,版权归原作者所有,内容仅供读者参考,如有侵权请联系我们删除!

Copyright © 2022 匯編語言學習筆記 Inc. 保留所有权利。

底部版权信息