zoukankan      html  css  js  c++  java
  • 路由

    路由的本质就是一种对应关系,根据不同的URL请求,返回对应不同的资源。那么url地址和真实的资源之间就有一种对应的关系,就是路由。

    路由分为:后端路由和前端路由

    ² 后端路由:由服务器端进行实现并实现资源映射分发

    ² 前端路由:根据不同的事件来显示不同的页面内容,取事件与事件处理函数之间的对应关系

    SPA(Single Page Application)单页面应用程序,基于前端路由而起:整个网站只有一个页面,通过监听地址栏中的变化事件,来通过Ajax局部更新内容信息显示、同时支持浏览器地址栏的前进和后退操作。

    前端路由实现

    前端路由也有2种模式:

    • hash模式(锚链接)

    hash路由模式是这样的:http://xxx.abc.com/#/xx。 有带#号,后面就是hash值的变化。改变后面的hash值,它不会向服务器发出请求,因此也就不会刷新页面。并且每次hash值发生改变的时候,会触发hashchange事件。因此我们可以通过监听该事件,来知道hash值发生了哪些变化。

    window.addEventListener('hashchange', ()=>{

    // 通过 location.hash 获取到最新的 hash

        console.log(location.hash);

    });

    • history模式 

    HTML5History API为浏览器的全局history对象增加了该扩展方法。它是一个浏览器(bom)的一个接口,在window对象中提供了onpopstate事件来监听历史栈的改变,只要历史栈有信息发生改变的话,就会触发该事件。

    history.pushState({},title,url); // 向历史记录中追加一条记录

    history.replaceState({},title,url); // 替换当前页在历史记录中的信息。

    window.addEventListener('popstate', function(event) {

      console.log(event)

    })

     

    注:浏览器地址没有#, 比如(http://localhost:3001/a); 它也一样不会刷新页面的。但是url地址会改变。但它在服务器没有配置的情况下,不能手动刷新,否则返回404页面

    手写一个hash路由

     

     

    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    JS实战 · 表单验证
    JS实战 · 仿css样式选择器
    JS实战 ·  收缩菜单表单布局
    cookie自动登录的实现
    redis 3.2.5单机版安装、使用、systemctl管理Redis启动、停止、开机启动
    yum问题解决
    配置yum镜像源
    shell笔记
    CCIE总结:路由器、交换机
    云主机如何挂在磁盘
  • 原文地址:https://www.cnblogs.com/ht955/p/14246922.html
Copyright © 2011-2022 走看看