• 路由Router


    1、为什么会出现前端路由。

    2、前端路由解决了什么问题。

    3、前端路由实现的原理是什么。

     

     

    -------------------------------------------------------------

    传统页面:DOM直出的页面,SSR属于首屏直出。

    DOM直出页面:浏览器输入网址发起请求,返回来的HTML文件(document)是页面最终呈现的页面。并且每次跳转页面,都会重新请求HTML资源以及CSS资源。

    验证方式:1、显示网页源代码。2、看加载网页资源。

     

     

     

    -----------------------------------------------------------------------------------

     

    单页面(SPA):

    需求复杂度,产出一些优秀的前端框架React、Vue、Angular。单页面应用前端框架。

    这些框架的共同的特征就是:通过JavaScript渲染页面。(页面通常有一个页面入口,即挂载点。通过app.js文件动态渲染挂载到页面。)

     

    单页面,面临的问题是,当页面需要跳转时,前端如何处理。这时候前端路由技术应用而生。

    前端路由的出现就是解决了单页面应用,页面跳转的问题。即通过切换浏览器地址路径,来匹配相对应的页面组件!

     

    更详细的过程:

    前端路由 会根据浏览器地址栏 pathname 的变化,去匹配相应的页面组件。然后将其通过创建 DOM 节点的形式,塞入根节点 <div id="root"></div> 。这就达到了无刷新页面切换的效果,从侧面也能说明正因为无刷新,所以 React 、 Vue 、 Angular 等现代框架在创建页面组件的时候,每个组件都有自己的 生命周期 。

     

     

    前端路由插最火的  Vue-Router      React-Router

    逻辑原理是一样的。

     

    前端路由的两种模式:

      哈希模式(Hash模式):

      a 标签锚点大家应该不陌生,而浏览器地址上 # 后面的变化,是可以被监听的,浏览器为我们提供了原生监听事件 hashchange ,它可以监听到如下的变化:

     

      历史模式(History模式):

     

     

     

     

  • 相关阅读:
    elasticsearch 插件 大全
    ElasticSearch 服务搭建
    限制玻尔兹曼机(Restricted Boltzmann Machine)RBM
    卷积神经网络
    [转]MATLAB cell数据类型
    [转]matlab语言中的assert断言函数
    [转]matlab中squeeze函数的用法,numel的用法
    Sparse autoencoder implementation 稀疏自编码器实现
    MATLAB中的randi函数
    可视化自编码器训练结果&稀疏自编码器符号一览表
  • 原文地址:https://www.cnblogs.com/swt-axios/p/14307804.html
Copyright © 2020-2023  润新知