JS路由

青旅半醒 2022-06-17 07:49 194阅读 0赞

**一个极简前端路由实现**

说一下前端路由实现的简要原理，以 hash 形式（也可以使用 History API 来处理）为例，当 url 的 hash 发生变化时，触发 hashchange 注册的回调，回调中去进行不同的操作，进行不同的内容的展示。直接看代码或许更直观。

上面路由系统 Router 对象实现，主要提供三个方法

*  init 监听浏览器 url hash 更新事件
 *  route 存储路由更新时的回调到回调数组routes中，回调函数将负责对页面的更新
 *  refresh 执行当前url对应的回调函数，更新页面

Router 调用方式以及呈现效果如下：点击触发 url 的 hash 改变，并对应地更新内容（这里为 body 背景色）

<ul> 
        <li><a href="#/">turn white</a></li> 
        <li><a href="#/blue">turn blue</a></li> 
        <li><a href="#/green">turn green</a></li> 
    </ul>

![156436f6-19d5-11e6-8c90-c24f6d8cc24e.gif][]

[156436f6-19d5-11e6-8c90-c24f6d8cc24e.gif]: /images/20220617/38f39426a6654d9bbd9a9cac3a5ac606.png

JS路由

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 JS获取路由参数

相关 vue 路由、嵌套路由、动态路由

相关 nuxt.js 路由和路由参数

相关 nuxt.js 动态路由

相关 Nuxt.js学习(三)---Nuxt的动态路由、路由参数、路由嵌套

相关 JS路由

相关 JS实现路由跳转

相关 node.js express 路由 select

相关 javascript 实现Vue.js路由

相关 Vue.js的路由