栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 系统运维 > 运维 > Linux

什么是前端路由?前端路由核心是什么?hash模式和history模式?

Linux 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

什么是前端路由?前端路由核心是什么?hash模式和history模式?

什么是前端路由?监听浏览器地址栏,当发生改变时,加载改变后url所对应的组件,再显示到浏览器;url 和 它所对应的组件 的这一套映射关系就叫前端路由。
未使用路由懒加载:

使用路由懒加载,例如:

{
    path: '/about',
    name: 'about',
    component: () => import('../views/about.vue')
  },

如果使用了路由懒加载,浏览器第一次输入url时,不会一次性 从Nginx服务器上 将全部静态资源 获取到浏览器,而是会将vendor,js(存放vue、vant等第三方js),manifest.js(底层的支持,例如commonjs等)、app.js(程序员编写的业务代码)、当前路由对应组件的js、app的js 先获取到浏览器;其余路由对应组件的js 先放在Nginx服务器上,等需要时,再加载。

前端路由(SPA单页面富应用)核心是什么?改变url时,页面不进行整体刷新的;因为如果页面刷新的话,要去静态服务器(Nginx)请求一套新的资源;所以当url改变时,页面是不会进行整体刷新的。

hash模式和history模式?
如果直接修改浏览器的url,页面是会自动刷新的;而 hash模式和history模式 就是实现修改url,页面不刷新的两种方案;

hash模式(vue-cli2默认模式):

history模式(vue-cli3默认模式):

history.replaceState() 是无法返回上一页的

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/944158.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号