前端路由之 Hash 路由原生实现

mcterry 发布于2019-08-20 17:18 / 1654人阅读

摘要：路由的实现使用过框架路由的人肯定都有注意到中的号，为什么路由页面不会跳转还记得链接的锚点是怎么实现的吗。

Hash 路由的实现 使用过框架路由的人肯定都有注意到url中的#号，为什么hash路由页面不会跳转——还记得a链接的锚点是怎么实现的吗。

多个路由集中处理

匹配对应路由

利用回调处理相应的逻辑

代码(详细的注释)

  
    index
    item
    list
  
  

  

  头部
  


    function Router() {
       // 路由储存
       this.routes = {};
       // 当前路由
       this.currentUrl = "";
    }
    Router.prototype = {
      // 路由处理
      route: function (path, callback) {
        this.routes[path] = callback || function(){};
      },
       // 页面刷新
      refresh: function () {
        // 当前的hash值
        this.currentUrl = location.hash.slice(1) || "/";
        // 执行hash值改变后相对应的回调函数
        this.routes[this.currentUrl]();
      },
      // 页面初始化
      init: function () {
        // 页面加载事件
        window.addEventListener("load", this.refresh.bind(this), false);
        // hash 值改变事件
        window.addEventListener("hashchange", this.refresh.bind(this), false);
      }
    }
   
    // 全局挂载
    window.Router = new Router();
    // 初始化
    window.Router.init();

    let obj = document.querySelector(".result");
    
    function changeConent (cnt) {
      obj.innerHTML = cnt
    }

    // 匹配路由做相应的操作
    Router.route("/", () => {
      changeConent("当前是首页");
    })

    Router.route("/item", () => {
      changeConent("当前是item页面");
    })

    Router.route("/list", () => {
      // ajax 的数据就可以这样去拼接
      setTimeout(() => {
        obj.innerHTML = "Hello World"
      }, 1000)
    })

云服务器 GPU云服务器前端路由 js前端路由 url路由实现 js前端路由原理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83475.html

原生 js 实现一个前端路由 router

摘要：实现原理现在前端的路由实现一般有两种，一种是路由，另外一种是路由。现在的前端主流框架的路由实现方式都会采用路由，本项目采用的也是。当值发生改变的时候，我们可以通过事件监听到，从而在回调函数里面触发某些方法。效果图： showImg(https://segmentfault.com/img/remote/1460000018058419?w=422&h=744); 项目地址：https...

gggggggbong 2019-08-26 13:30 评论0 收藏0
JS原生一步步实现前端路由和单页面应用

摘要：这里借鉴了一下的处理方式，我们把单独模块的包装成一个函数，提供一个全局的回调方法，加载完成时候再调用回调函数。前端路由实现之 #hash 先上github项目地址： spa-routers运行效果图showImg(https://segmentfault.com/img/bVFi7l?w=581&h=312); 背景介绍用了许多前端框架来做spa应用，比如说backbone，ang...

idealcn 2019-08-20 12:07 评论0 收藏0
前端路由原理解析和实现

摘要：如何实现前端路由要实现前端路由，需要解决两个核心如何改变却不引起页面刷新如何检测变化了下面分别使用和两种实现方式回答上面的两个核心问题。原文链接：github.com/whinc/blog/… 在单页应用如此流行的今天，曾经令人惊叹的前端路由已经成为各大框架的基础标配，每个框架都提供了强大的路由功能，导致路由实现变的复杂。想要搞懂路由内部实现还是有些困难的，但是如果只想了解路由实现基本...

lavor 2019-05-23 16:28 评论0 收藏0
国内存在感最低的前端API——浏览器路由

摘要：最新一直在看关于和路由这块的知识，最终发现这些路由框架的模块功能的实现都是基于浏览器原生路由的。在浏览器中实现前端路由主要有两种方式一个是我们常用的，另一个是提供的。该对象的和分别表示的各个部分，它们因此被称为分解属性。最新一直在看关于 Vue 和 React 路由这块的知识，最终发现这些路由框架的模块功能的实现都是基于浏览器原生路由 API 的。本着追根溯源的初心，于是就想着将浏览...

U2FsdGVkX1x 2019-08-23 17:10 评论0 收藏0