使用js实现单页应用路由转跳功能

最新推荐文章于 2024-09-23 18:07:56 发布

鱼丸粗面不要香菜

最新推荐文章于 2024-09-23 18:07:56 发布

阅读量1.1k

点赞数

分类专栏：学习笔记文章标签： JavaScript 路由

本文链接：https://blog.csdn.net/qq_41080490/article/details/84531020

版权

前言

在做一个非常简单的h5小游戏的时候，需求比较简单，决定使用jq直接搭建，在做到页面之间切换的时候，由于VUE使用习惯了，于是很自然的想到使用js去实现一个简单的路由功能。

思路

通过监听 hash 的改变，当 url 的 hash 发生变化时，触发 hashchange 注册的回调，回调中去进行不同的操作，对不同的内容进行显示和隐藏，从而达到不同的 hash 显示不同的内容。

实现

router.js

function Router(){
   
  this.routes={
   };
  this.currentURL='';
}

Router.prototype.route = function(path,callback){
   
  this.routes[path] = callback || function(){
   };
}

Router.prototype.refresh = function(){
   
  this.currentURL = location.hash.slice