前端路由原理

前端路由原理

1、传统开发方式url改变后，立刻发生请求响应整个页面，有可能资源过多，传统的开发会让页面出现白屏

2、SPA single Page Appliction

3、单页面应用：锚点值的改变不会立刻发送请求，而是在某个合适的机会发起ajax请求，局部改变的数据

4、优点：用户的体验好，页面不立刻跳转

5、前端路由
* 锚点值监视
* ajax获取动态数据
* 核心点是锚点值
* 前端框架 Vue/angular/react都很适合开发单页应用

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>前端路由的原理</title>
</head>
<body>
    <a href="#/login">登录</a>
    <a href="#/register">注册</a>
    <div id="app"></div>
</body>
</html>
<script>
    // 获取元素
    var view=document.getElementById("app");
    // onhashchange: 事件在当前 URL 的锚部分(以 '#' 号为开始) 发生改变时触发
    window.onhashchange=function(){
        // hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）
        console.log(location.hash);
        switch (location.hash) {
            case '#/login':
                view.innerHTML='<h1>我是一个登录页面</h1>'
                break;
            case '#/register':
                view.innerHTML='<h1>我是一个注册页面</h1>'
                break;
            default:
                // statements_def
                break;
        }
    }
</script>