路由的基本實現 hash路由

vue、react在路由的實現上，都有基於hash的路由。那麼如何使用原生來實現呢？

比如類似下面這樣的路由：

hash實現路由的時候，最本質的原理就是hash值的變化，會引發乙個hashchange事件，可以根據這個hash值的變化，載入不同的dom。

html:

<

divclass
="box flex-box"
>
<
span
class
="flex1 center route"
>
home
span
>
<
span
class
="flex1 center route"
>
shop
span
>
<
span
class
="flex1 center route"
>
shopcar
span
>
<
span
class
="flex1 center route"
>
usercenter
span
>
div>
<
divid
="root"
>
div>

//路由配置

const
routes = [,,,]
//基本實現
var mount = document.getelementbyid('root'
);var
list
= document.getelementsbyclassname('route'
);for
(var
i = 0
; i < list
.length; i++)`;
}})(i)
}window.addeventlistener('hashchange'
,function
(e));
mount.innerhtml = item.template;
})

<

html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>
title
title
>
<
meta
name
="viewport"
content
="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
>
<
style
>
.flex-box
.flex1
.center
.box
.route
style
>
head
>
<
body
>
<
divclass
="box flex-box"
>
<
span
class
="flex1 center route"
>
home
span
>
<
span
class
="flex1 center route"
>
shop
span
>
<
span
class
="flex1 center route"
>
shopcar
span
>
<
span
class
="flex1 center route"
>
usercenter
span
>
div>
<
divid
="root"
>
div>
body
>
<
script
>
const
routes = [,,,]
script
>
<
script
>
varmount = document.getelementbyid(
'root'
); 
varlist = document.getelementsbyclassname(
'route'
); 
for(
vari = 
0; i < list.length; i++)`;
}})(i)
}window.addeventlistener(
'hashchange'
,function
(e));
mount.innerhtml = item.template;
})script
>
html
>

hash路由和history路由

hash模式 url後面的有乙個 後面的字串，叫hash值，也叫錨點。1 hash 值變化不會導致瀏覽器向伺服器發出請求 2 hash 改變會觸發 hashchange 事件 當hash值變化了，就會觸發事件 3 在 html5 的 history 出現前，基本都是使用 hash 來實現前端路由的 ...

關於hash路由和history路由

1.參考文件 hash模式?history模式 window.location.hash和search掐架 2.問題 3.關於兩種路由的組成 hash模式 簡單總結 除去伺服器需要使用的，能使用的僅剩下了hash,hash改變不會重新整理頁面,hash值改變會增加歷史記錄 就是會有頁面的前進後退 號...

路由的hash和history模式

為了構建 spa 單頁面應用 需要引入前端路由系統，這也就是 vue router 存在的意義。前端路由的核心，就在於 改變檢視的同時不會向後端發出請求。為了達到這種目的，瀏覽器當前提供了以下兩種支援 history 利用了 html5 history inte ce 中新增的 pushstate ...