JavaScript的路由

最新推荐文章于 2025-06-06 09:31:42 发布

ITjun666

最新推荐文章于 2025-06-06 09:31:42 发布

阅读量2k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/ITjun666/article/details/127737492

前端路由的概述:

前端路由是根据对应路由地址渲染不同的内容

后端路由的概述:

根据对应的路由地址访问对应的接口

前端路由的分类:

1.页面路由(会刷新)

根据对应的地址访问不同的页面(location.href location.assign location.replace)

2.hash路由 (不会刷新)

根据对应的hash地址来渲染不同的内容(onhashchange)

location.hash 来获取对应的hash值通过onhashchange进行监听

3.history路由 (不会刷新)

根据对应的history页面的地址来渲染不同的内容(onhashchange)

通过replaceState和pushState来改变state的值和页面的地址

通过history.back history.go history.forward来触发对应的onpopstate事件

SPA:

单页应用程序 (single page application) ,整个应用只有一个页面,对应的页面跳转就没有意义,所以对应的spa实现只有是hash模式和history模式,在后续的vue或者独有的react中,它主要做的是spa的应用只要采用hash和history,hash的监听能直接触发history的监听不能直接触发所以默认是hash模式 .

hash路由的实现:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width