前端路由简单理解及应用

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端路由简单理解及应用相关的知识，希望对你有一定的参考价值。

路由的概念
路由的本质就是一种对应的关系，比如说我们在url中地址中输入我们需要访问的url地址之后，浏览器要去请求这个url地址对应的资源那么url地址和真实的资源之间就有一种对应关系，就是路由
路由分为前端路由和后端路由

  • 后端路由
    1.概念：根据不同的用户URL请求，返回不同的内容
    2.本质：URL请求地址与服务器资源之间的对应关系

  • 前端路由
    1.概念：根据不同的用户事件，返回不同的页面内容
    2.本质：用户事件与事件处理函数之间的对应关系

  • 了解页面数据渲染的演变
    最初页面的渲染是由后端路由来实现的但是后端渲染存在性能问题即：假设用户和服务器经常有提交表单这样的行为后端路由就会导致页面被频繁的刷新导致用户体验会非常的差。因此出现了Ajax技术，可以实现页面上的局部刷新，极大地提高了用户使用体验。但是单纯的Ajax技术不支持浏览器的前进和回退的这样的历史操作，没办法保存用户在浏览器中的保留的状态。因此，出现了SPA：单页面应用程序，所谓的SPA就是整个网站只有一个网页，内容的变化是通过Ajax局部更新同时支持浏览器的前进和后退
  • 了解SPA实现的原理之一：基于URL地址的hash（hash的变化会导致浏览器记录访问历史的变化，但是hash的变化触发新的URL请求）实现SPA过程中，最核心的技术点就是前端路由
    实现前端路由的一个小例子 
        <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <!-- 导入 vue 文件 -->
        <script src="./lib/vue_2.5.22.js"></script>
    </head>
    <body>
        <!-- 被 vue 实例控制的 div 区域 -->
        <div id="app">
        <!-- 切换组件的超链接 -->
            <a href="#/zhuye">主页</a> 
            <a href="#/keji">科技</a> 
            <a href="#/caijing">财经</a>
            <a href="#/yule">娱乐</a>
        <!-- 根据 :is 属性指定的组件名称，把对应的组件渲染到 component 标签所在的位置 -->
        <!-- 可以把 component 标签当做是【组件的占位符】 -->
            <component :is="comName"></component>
        </div>
        <script>
        // #region 定义需要被切换的 4 个组件
        // 主页组件
        const zhuye = {
            template: ‘<h1>主页信息</h1>‘
        }
        // 科技组件
        const keji = {
            template: ‘<h1>科技信息</h1>‘
        }
        // 财经组件
        const caijing = {
            template: ‘<h1>财经信息</h1>‘
        }
        // 娱乐组件
        const yule = {
            template: ‘<h1>娱乐信息</h1>‘
        }
        // #endregion
        // #region vue 实例对象
        const vm = new Vue({
            el: ‘#app‘,
            data: {
            comName: ‘zhuye‘
            },
            // 注册私有组件
            components: {
            zhuye,
            keji,
            caijing,
            yule
            }
        })
        // #endregion
        // 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
        window.onhashchange = function() {
            // 通过 location.hash 获取到最新的 hash 值
            console.log(location.hash);
            switch(location.hash.slice(1)){
            case ‘/zhuye‘:
                vm.comName = ‘zhuye‘
            break
            case ‘/keji‘:
                vm.comName = ‘keji‘
            break
            case ‘/caijing‘:
                vm.comName = ‘caijing‘
            break
            case ‘/yule‘:
                vm.comName = ‘yule‘
            break
            }
        }
        </script>
    </body>
    </html>

以上是关于前端路由简单理解及应用的主要内容，如果未能解决你的问题，请参考以下文章

javascript基础修炼——前端路由的基本原理

深入理解 react-router 路由系统

前端hash路由基本原理,及代码的基本实现

Javascript实现前端简单路由

route-map的原理及简单应用

Express实战 - 应用案例- realworld-API - 路由设计 - mongoose - 数据验证 - 密码加密 - 登录接口 - 身份认证 - token - 增删改查API(代码片段