原生JS实现并封装前端路由

最新推荐文章于 2024-07-23 23:08:01 发布

原创

最新推荐文章于 2024-07-23 23:08:01 发布 · 置顶 · 2k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端路由

本文介绍如何使用原生JavaScript实现前端路由，通过监听a标签点击和hashchange事件，结合iframe实现页面动态加载。文章提供了详细步骤和注意事项，包括事件绑定、URL锚点处理、目标容器管理和首页默认加载。

目前，前端中所有的MVVM框架中基本都有自己的Router组件，比如React-router或者Vue-router,主要的作用就是通过拦截url来返回相应的组件。如果我们通过原生js来实现一个类似的router，应该怎么做呢？本文将提供一个思路和完整demo，以解释其中的原理。

一.效果图

在这里插入图片描述

二.代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="author" content="helang.love@qq.com">
    <title>前端路由</title>
    <style type="text/css">
        .router_box,
        #router-view {
   
   
            padding: 0 20px;
            background-color: gainsboro;
            height: 55px;
            line-height: 50px;
        }

        .router_box>a {
   
   
            padding: 0 10px;
            color: #364086;
        }

        .content{
   
   
            border: 1px solid #a030b3;
        }
    </style>
</head>

<body>
    <div class="router_box">
        <a href="/home" class="router">主页</a>
        <a href="/sort" class="router">分类</a