前端路由机制

Posted lijianming180

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端路由机制相关的知识,希望对你有一定的参考价值。

前端路由:在应用使用期间不会重新加载,提高用户体验,减低网速要求,界面展开快。前后端分离方便开发

目前前端路由有两种实现方法:

  1. 利用url的hash,当浏览器url的锚点部分发生改变,不会刷新页面的原理
  2. 利用h5中的history,通过监听opostate事件,利用pushstate或replacestate实现

原生router/hash版

html:

1
2
3
4
5
6
<ul>
<li><a href="#/home">home</a></li>
<li><a href="#/about">about</a></li>
</ul>

<div id="routerView"></div>

js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var routerView=document.querySelector("#routerView");
window.addEventListener("DOMContentLoaded",onchange);
window.addEventListener("hashchange",onchange);

function (){
switch(location.hash){
case "#/home":
routerView.innerHTML="home";
return;
case "#/about":
routerView.innerHTML="about";
return;
default:
routerView.innerHTML="";
return;
}
}

原生router/history版

html:

1
2
3
4
5
6
<ul>
<li>大专栏  前端路由机制tag"><a href="/home">home</a></li>
<li><a href="/about">about</a></li>
</ul>

<div id="routerView"></div>

js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var routerView=document.querySelector("#routerView");

window.addEventListener("popstate",onchange);


document.querySelectorAll("a[href]").forEach(
el=> el.addEventListener("click",function(e){
e.preventDefault(); //阻止A标签默认行为
var path=el.getAttribute("href");
history.pushState(null,"",path); //@param 1)状态对象2)标题3)URL
onchange(); //手动触发
}))
function (){
switch(location.pathname){
case "/home":
routerView.innerHTML="home";
return;
case "/about":
routerView.innerHTML="about";
return;
default:
routerView.innerHTML="";
return;
}
}

总结

hash:

  1. 利用锚点导航(改变URL中的hash不引起页面刷新)
  2. hashchange监听hash变化,(浏览器前后退,a标签,window.location均可触发)

history:

  1. history对象提供了pushState和replaceState方法,这两个方法改变URL不会引起页面刷新
  2. popstate事件,(浏览器前后退可触发,a标签需阻止默认,window.location需改写成history.pushState)

以上是关于前端路由机制的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

前端开发常用代码片段(中篇)

前端开发常用js代码片段

前端防扒代码片段

前端防扒代码片段