zoukankan      html  css  js  c++  java
  • 前端路由原理

    前端路由原理

    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>
  • 相关阅读:
    【思维导图】前端开发JavaScript-巩固你的JavaScript知识体系
    前端面试日更解答 2020-03-28
    CSS基础知识
    HTML基础知识
    Web页面制作基础
    前端面试日更解答 2020-03-24
    前端面试日更解答 2020-03-23
    前端面试日更解答 2020-03-22
    前端面试日更解答 2020-03-21
    前端面试日更解答 2020-03-20
  • 原文地址:https://www.cnblogs.com/xiaozhou223/p/11891817.html
Copyright © 2011-2022 走看看