关于前端路由

我在人间贩卖青春

于 2023-01-09 17:20:07 发布

阅读量368

点赞数 1

分类专栏：前端爬坑文章标签：前端路由

本文链接：https://blog.csdn.net/weixin_44178305/article/details/128524619

版权

前端爬坑专栏收录该内容

25 篇文章 1 订阅

订阅专栏

路由

路由发展史

路由——这个概念最早出现在后台。
传统的mvc架构的web开发（前后端未分离），由后台设置路由规则，当用户发送请求（页面交互）时，后台根据设定的路由规则将数据渲染到模板中，并将模板返回给用户，因此，用户每发送一次请求（后台交互）就要刷新一次页面，用户体验十分不好。
Ajax的出现有效解决了这一问题。Ajax时浏览器提供的一种技术方案，采用异步加载数据的方式实现页面局部刷新，极大提升了用户体验。
再后来出现了SPA（单页面应用），不仅也页面交互无刷新，页面跳转也可以无刷新，前端路由也就随之产生。

前端路由

前端路由——仅改变页面地址，使用前端代码刷新页面，而不向后端服务器实际发送请求的组件，就称为前端路由。
广义上的前端路由是指前端根据URL来分发视图，两个核心操作：一是需要监听浏览器地址的变化；二是需要动态加载视图。
使用原生javascript实现前端路由：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <ul>
            <li>
                <a href="#/">Home</a>
                <a href="#/about">About</a>
            </li>
        </ul>
        <div id="view"></div>
    </div>
</body>
<script>
    let Home = '<h1>This is Home!</h1>';
    let About = '<h1>This is About!</h1>';
    let Router = function (el) {
        let view = document.getElementById(el)
        let routes = []
        let load = function (route) {
            route && (view.innerHTML = route.template)
        }
        let redirect = function () {
            let url = window.location.hash.slice(1) || '/'
            for (let route of routes) {
                url === route.url && load(route)
            }
        }
        this.push = function (route) {
            routes.push(route)
        }
        window.addEventListener('load', redirect, false);
        window.addEventListener('hashchange', redirect, false)
    }
    let router = new Router('view')
    router.push({
        url: '/',
        template: Home
    })
    router.push({
        url: '/about',
        template: About
    })
</script>
</html>