- 综合排序
- 最热优先
- 最新优先
- 来自专栏全栈程序员必看
Vue单页面应用
总结如下： 单页面应用指一个系统只加载一次资源，然后下面的操作交互、数据交互是通过router、ajax来进 行，页面并没有刷新； <1>在vue搭建的环境里面怎么有没有公用的css和js 有公用的css和js，有两种引用的方法：（要深刻理解单页面应用程序哦，单页面就是引入后在哪里都能使用） 1.全局公共引用样式和js文件 2.组件的引入 单页面的应用优点： 1 不会把前后端的逻辑混杂在一起； 2.减轻服务器压力，服务器只用出数据就可以； 3.同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端； 4.用户体验好、快，内容的改变不需要重新加载整个页面 ，web应用更具响应性和更令人着迷； 5.SPA和RESTful架构一起使用，后端不再负责模板渲染、输出页面工作，web前端和各种移动终端地位对等，后端API通用化； 单页面的应用缺点： 1. 初次加载耗时相对增多； 2.导航不可用，如果一定要导航需要自行实现前进、后退，需要程序来实现管理； 3.使用脚本修改页面，这个脚本我们都知道，他的兼容性是个大问题； 4.
1.2K20编辑于 2022-09-07 - 来自专栏Springboot框架学习
单页面应用（SPA）和多页面应用（MPA）区别
一.简介 Web应用开发是现在很多地方应用，以前的CS的客户端开发，虽然也有，不过很少有人做了。对于BS开发也慢慢的多出来很多不同的技术和样式。前后端分离、单页面应用、微服务、容器等。 单页面应用（SPA），只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。 多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新，大多数前后端合在一起的框架使用的是多页面 二.区别 单页面应用（SPA） 概念：只有一个html页面，所以跳转的方式是组件之间的切换 比如企业内部解决方案、零售业解决方案等等 单页面一般做手机app比较多，现在大多数手机app的套壳都是单页面应用。 SEO友好，多页面应用比较合适，也许客户需要页面流畅，app等开发比例比较高，单页面应用比较合适，能用最快的开发效率做出客户满意的系统，才是最终的目标。
3.6K30编辑于 2022-08-17 - 来自专栏全栈程序员必看
vue单页面应用的原理
name=zs#absdklfajdf 当哈希值改变（哈希值就是：#absdklfajdf），页面不会发生跳转，单页面应用就是利用了这一点： 单页面应用因为只有一个页面，所以页面不能发生跳转，但是，我们又需要根据 url地址来展示不同的组件 这个时候，只能用哈希值来表示究竟要展示哪个组件了 单页面应用就是根据hash值来改的 给window注册onhashchange事件，当哈希值改变时通过location.hash 就能获得相应的哈希值，然后就能跳到相应的页面： <body>
<component :is="currentPage"></component>75320编辑于 2022-09-07来自专栏萝卜大杂烩Vue + Flask 实现单页面应用
今天使用我们一起来尝试，使用 Vue + Flask 搭建一个简单的单页面应用。 8npm install sass-loader node-sass --save-dev 9# 安装依赖 10npm install 启动工程 1npm run dev 此时，一个最简 vue 应用就完成了 name: 'Main', 20 component: Main 21 }, 22 { 23 // 登陆页面 现在我们在浏览器中打开上面的地址，就可以得到页面如下： ? 至此，一个简单的前后端分离的单页面应用就完成了。 看完本文，你可以按着步骤自己实现下。刚接触的伙伴在看的过程中在某些地方可能有疑惑，其实我也研究了好久，也有好多存疑的地方。
2.5K10发布于 2019-07-17来自专栏学点博客单页面Web应用（SPA应用）SEO优化
单页Web应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。 它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转。 由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验。得益于ajax，我们可以实现无跳转刷新，又多亏了浏览器的histroy机制，我们用hash的变化从而可以实现推动界面变化。 当然任何东西都有两面性，以下是卤煮总结的一些目前SPA的优缺点：优点无刷新界面，给用户体验原生的应用感觉。缺点不利于搜索引擎抓取。 SEO到底指的是什么意思？ 随着单页面应用的普及，人们在感受其带来的完美的用户体验，极强的开发效率的同时，也似乎不可避免要去处理 SEO 的需求。
1.7K10编辑于 2022-08-15来自专栏OECOM单页面应用history路由实现原理
在单页面应用中history路由是很受欢迎的，它的路由显示方式和传统的路由方式相同，在显示上很美观，比hash的方式看着舒服的多。 跳转到指定的页面 HTML5引入了 history.pushState() 和 history.replaceState() 方法，这两个方法都可以跳转到指定的url页面，主要区别在于replaceState page=3, state: {"page":3} history当前状态 页面加载时，或许会有个非null的状态对象。 这是有可能发生的，举个例子，假如页面（通过pushState() 或 replaceState() 方法）设置了状态对象而后用户重启了浏览器。 那么当页面重新加载时，页面会接收一个onload事件，但没有 popstate 事件。然而，假如你读取了history.state属性，你将会得到如同popstate 被触发时能得到的状态对象。
3.6K10发布于 2020-07-01来自专栏Python in AI-IOTWeb开发---单页面应用(签到日报)
疫情前期，员工分布在各个地区，需要上报个人的健康状态和位置信息，于是做了一个单页面应用（当时钉钉和微信上的健康上报模板还没出现） 操作流程 进入页面时使用百度地图API定位接口首先定位其位置（经纬度和地址 image.png image.png 弹窗确定后进入页面 image.png 第一步，点击芳名，弹窗选择“我是谁”。 image.png 在这个页面可以滚动查看所有人所填写的表单。
1.1K10发布于 2020-03-16来自专栏全栈程序员必看什么是单页面应用开发工具_单页面和多页面的区别及优缺点
单页面应用开发 MPA与SPA简介 MPA MPA (Multi-page Application) 多页面应用指的就是最传统的 HTML 网页设计，早期的网站都是这样的设计，所之称为「网页设计」。 使用 MPA 在使用者浏览 Web 时会依据点击需求切换页面，浏览器会不停的重载页面 (Reload)，整个操作也常感觉卡卡。 SPA SPA (Single-page Application) 顾名思义在 Web 设计上使用单一页面，利用 JavaScript 操作 Dom 的技术实现各种应用，现今在介面上算是非常受欢迎的设计 ，搭配 AJAX 使得整体页面反应速度相当迅速，配合上路由懒加载等手段可以达到Native应用的体验。
1.1K30编辑于 2022-11-08来自专栏网络日志一文讲解前端路由、后端路由、单页面应用、多页面应用
前端路由 定义：主要用于单页面应用，大部分页面结构不变，只通过JS改变部分内容的使用（例如：react-router,vue-router） 优点：用户体验好，不需要每次都从服务器全部获取，在切换页面时快速展现给用户客户端渲染可以减轻服务器压力 在SEO角度讲单页面应用天生对SEO不友好，因为整个页面都是通过JS渲染的，搜索引擎爬虫只能抓取到一个根节点，但是后端路由是经过后端自带的模板框架渲染的（ejs,jsp）已经在服务器拼接好了HTML对搜索引擎蜘蛛会更倾向与后端路由 单页面应用 优势： 实际上并不存在页面切换问题，因为整个网站只有一个HTML，通过预先加载好的JS控制页面显示会更流畅，而且可以附加各种动画和过度效果，用户体验更好。 ，如果测试有误对漏掉一些BUG很可能影响后续功能 体积较大，首次加载时间较长，首页白屏问题 多页面应用 优势: 逻辑清楚页面直接几乎没有相互影响 单个页面体积小，加载速度快 劣势: 代码冗余 页面切换体验不好 总结 1.如果选择前端路由后端路由、单页面与多页面？
2.9K20编辑于 2022-07-06来自专栏农历七月廿一SPA（单页面应用）的基本实现原理
写在前面 我们应该都使用过网易云音乐或者是别的一些逼格比较高的网页，他们比较厉害的一点是页面看起来只有一个，不管你点击什么地方，永远不会刷新页面，都是感觉是在一个页面上完成的操作，这个逼格那么高的页面是怎么实现的呢 源码已经上传到Github上：spa应用的简单实现 我们首先看一下效果： ? 那么之前我说过，遇到一个问题怎么办？ 首先分析一下问题包括几个部分，这里可以看到，想实现这样效果，有两个前提，第一是页面不可以刷新，第二个是怎么可以获取到URL中#（锚部分）后面的东西，如果可以控制#后面的值那么我们就可以用它来写文章。 OK，问题定位到了以后，下面就是怎么解决的问题，首先我们都知道，不刷新页面其实很简单，就是使用ajax就可以了，ajax的异步请求是完全可以满足我们第一个问题的解决方案的，第二个怎么做呢？ 其实呢也简单，我们都知道页面的location对象，他有很多自己的属性： ? 我们可以看到第一个hash不正是我们要找的吗？ 解决方案有了，下面就是编码了，怎么实现呢？看代码： ?
1.3K20发布于 2020-05-29来自专栏开发三两事vue单页面应用首次访问速度优化
应用背景：应用采用前后端分离开发，前端直接使用nginx部署vue打包文件提供访问需要； 问题阐述：vue大页面应用直接npm run build进行打包，前端部署后首次访问速度缓慢，基本需要40秒左右 on; 大概可以让文件再缩小一半，通过以上优化，我的1m网速服务器基本可以做到1秒左右打开服务器（有时候取决于cdn的网速， 很关键） 总结：以上优化操作，基本可以将我最初40秒初始访问页面速度提升到
1.6K41发布于 2020-12-30来自专栏全栈程序员必看vue等单页面应用及其优缺点
先来说说什么是单页面应用和多页面应用： 单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。 所有的页面内容都包含在这个所谓的主页面中。 多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新。 单页面的优点和缺点： 优点： 1、用户体验好，快，内容的改变不需要重新加载整个页面，对服务器压力较小。 2、不利于 SEO优化，单页页面，数据在前端渲染，就意味着没有 SEO。 3、页面导航不可用，如果一定要导航需要自行实现前进、后退。 （由于是单页面不能用浏览器的前进后退功能，所以需要自 己建立堆栈管理） 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/149110.html
85110编辑于 2022-09-12来自专栏Python in AI-IOTWeb开发---单页面应用(签到日报--历史统计)
疫情前期，员工分布在各个地区，需要上报个人的健康状态和位置信息，于是做了一个单页面应用（当时钉钉和微信上的健康上报模板还没出现） 本文介绍查看自己的历史签到信息和查看所有人的历史签到信息。
73910发布于 2020-03-16来自专栏Python in AI-IOTWeb开发---单页面应用(签到日报--技术实现)
疫情前期，员工分布在各个地区，需要上报个人的健康状态和位置信息，于是做了一个单页面应用（当时钉钉和微信上的健康上报模板还没出现） image.png 本文介绍前端和后台实现。 由于是单页面程序，它的实现代码还是比较复杂的。 html代码： <! -- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --> <!
1K00发布于 2020-03-16来自专栏Python in AI-IOTWeb开发---单页面应用(签到日报--横向扩展)
疫情前期，员工分布在各个地区，需要上报个人的健康状态和位置信息，于是做了一个单页面应用（当时钉钉和微信上的健康上报模板还没出现） image.png 如果把它快速的扩展到别的公司使用，通常的方法是在数据库表中新增一个表示公司的 参考华为welink为单独每一个公司开辟一个单独的数据库和服务器以达到公司间数据和应用完全物理隔离目的，我们使用了json文件当做员工表，我们只需为在数据库report中为不同公司单独创立名字为公司名称的数据表空间来存储签到表 Python中的tornado作为Web框架，在启动server时我们很容易命令行参数中直接传递公司名称和端口名称 这里company表示使用哪个json文件名称，db表示使用哪个数据库，port表示应用端口 image.png 同时使用tornado开发的后端Python程序渲染HTML模板时将命令行参数的company传递到前端页面中。 image.png 同样一份代码，上面已经为不同的公司分别在不同端口运行了多个应用，但是同一个域名用端口来区分访问不太友好，所以最后使用了Nginx来为它们做了端口映射，同时做了静态文件代理。
70900发布于 2020-03-16来自专栏TopFE前端单页面应用分布式部署探索
但是这条思路有几个问题需要提前解决一下 1:外部路由定位到内部内容的问题 2:组件资源依赖,版本管理的问题 3:域名部署,iframe操作的封装 4:跨应用 跨iframe的状态管理.
59610编辑于 2022-01-24来自专栏全栈程序员必看vue单页应用和多页应用_多页面应用需要vuejs吗
进入一家新的公司，要开发移动端app项目，前端技术选型时前端组长选的是vue的多页面开发，当时很蒙，vue不是单页面开发吗？咋出来多页面的。接触之后才发现确实存在也挺简单的，省去了路由表的配置。 单页面开发我就不多说了，主要讲多页面的开发模式与最终效果，网上一搜单页面会有好多文章博客，但是搜多页面的就很少了，比如下面这个就是列了一下两种开发模式的优缺点。 首先多页开发，肯定是一个页面就是一个单独文件，每个文件也有自己的.vue .js 和compoent自身组件，如下page里的一个文件就是一个页面。 如果页面之间相互跳转，没有单页面路由了，那就只能是window.location.href了，alertDialog里的哪个app.openView是安卓跳转方法，其实就相当于下面的注释。 那么这些页面最终也需要打包，最核心的就是下面方框里的代码了，chunk最终就是每个页面的文件名，对应的就是文件名.html. glob是打包多页面的一个方案插件，最后把pages对象抛出就行了。
1.1K21编辑于 2022-11-08来自专栏前端开发使用 Vue Router 实现单页面应用的路由功能
通过这个示例，你可以了解 Vue Router 的基本用法，并根据实际需求扩展更多功能，如嵌套路由、路由元信息、滚动行为控制等。
37710编辑于 2025-08-13来自专栏全栈程序员必看Vue（七）SPA 单页面及应用方式「建议收藏」
目录 SPA(Single Page Application) 单页面应用 1. 单页面应用与多页面应用对比 2. 单页面应用步骤 3. SPA路由跳转 ---- SPA(Single Page Application) 单页面应用 单页面是指整个应用程序只有一个唯一完整的 HTML 页面，而其它所谓的页面，其实都是组件片段而已 在今后所有的开发项目都是单页面应用。 1. 单页面应用与多页面应用对比 多页面应用 单页面应用 请求次数 每切换一次页面，都向服务器端重新发送请求；反复切换页面就会反复发送请求，请求次数多。 比较容易实现页面切换动画，因为单页面应用的所有页面组件已经同时保存在客户端了，同时显示也是有可能的。 2. 一个完整的单页面应用文件结构如下： 3.
2.6K20编辑于 2022-11-04来自专栏跨平台全栈俱乐部彻底理清前端单页面应用（SPA）的实现原理
兼容性好，传统服务端渲染多页面应用吐出来的都是字符串，HTML结构 缺点： 如果项目很大，不利于维护，据我所知，目前很多云计算公司，还有不少都是使用非单页面应用，例如一个几十万行的项目是用jQuery写的 ，有自己的生命周期，并且不像传统的应用，还加上了一层虚拟DOM以及diff算法 现在类似Ant-Design-pro这样的开箱即用的库已经很多，单页面应用的学习和开发成本已经很低很低，如果还在使用传统的技术去开发新的应用 这里并不是说多页面应用不好，只能说各有各自的好，单页面应用如果通过大量的极致优化手段，是可以从不少方面跟原生一拼。 ? 目前的单页面应用： 只有一张Web页面的应用，是一种从Web服务器加载的富客户端，单页面跳转仅刷新局部资源 ，公共资源(js、css等)仅需加载一次，常用于PC端官网、购物等网站 其实只有一个空的DIV 标签，其他都是js动态生态的内容 单页面应用实现步骤： 代码实现： 首先是一个静态模板文件 index.html <!
3.7K41发布于 2019-08-02
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号