前端路由机制

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代码片段

前端防扒代码片段

前端防扒代码片段