- 综合排序
- 最热优先
- 最新优先
- 来自专栏全栈程序员必看
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。所有的页面内容都包含在这个所谓的主页面中。 2，导航不可用，单页面大多数是通过前端的路由跳转，和后端没有关系，整个网站相当于一个页面，所以导航基本上不可用 3，整个网站相当于一个页面就会导致首次加载时耗时多，首屏加载过慢；seo优化不好 比如企业内部解决方案、零售业解决方案等等 单页面一般做手机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>75920编辑于 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的优缺点：优点无刷新界面，给用户体验原生的应用感觉。缺点不利于搜索引擎抓取。 SEO到底指的是什么意思？ 随着单页面应用的普及，人们在感受其带来的完美的用户体验，极强的开发效率的同时，也似乎不可避免要去处理 SEO 的需求。 npm install -g express npm install -g pm2 pm2 start server.js upstream spider_server { server localhost
1.7K10编辑于 2022-08-15来自专栏OECOM单页面应用history路由实现原理
在单页面应用中history路由是很受欢迎的，它的路由显示方式和传统的路由方式相同，在显示上很美观，比hash的方式看着舒服的多。 跳转到指定的页面 HTML5引入了 history.pushState() 和 history.replaceState() 方法，这两个方法都可以跳转到指定的url页面，主要区别在于replaceState page=1,条目索引为1 history.pushState({page: 2}, "title 2", "? page=2,条目索引为2 history.replaceState({page: 3}, "title 3", "? 那么当页面重新加载时，页面会接收一个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控制页面显示会更流畅，而且可以附加各种动画和过度效果，用户体验更好。 总结 1.如果选择前端路由后端路由、单页面与多页面？ 方案的选择要根据业务而定，如果是面向客户的产品（toC）推荐使用多页面后端路由，如果是面向企业的产品（ToB）推荐使用单页面前端路由 2.如何解决SEO和首页白屏的问题 首先要知道客户端渲染无法解决此问题
2.9K20编辑于 2022-07-06来自专栏IMWeb前端团队基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用
一般公司即便是官网的单页面项目都没这么复杂，如果这个项目能驾驭的了，相信大部分公司的其他单页面应用也就不在话下，即便更复杂，也不会比这个高到哪里去。 源码地址： https://github.com/bailicangdu/vue2-elm 技术栈 vue2 + vuex + vue-router + webpack + ES6/7 + fetch 2、一般涉及到money的网页逻辑都比较复杂，尤其像饿了么这样一个开放的平台，商家和食品种类繁多，页面与页面之间交互复杂，在写到 购物车 和 下单 功能时众多的数据和逻辑一度让人很头疼，又没有设计和接口 3、vue因其轻量级的框架在中小型项目中表现亮眼，在大型单页面应用中因为vuex的存在，表现依然出色，在处理复杂交互逻辑的时候，vuex的存在是不可或缺的。 所以说利用 vue + vuex 完全可以去做大型的单页面项目。
96220发布于 2019-12-05来自专栏IMWeb前端团队基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用
一般公司即便是官网的单页面项目都没这么复杂，如果这个项目能驾驭的了，相信大部分公司的其他单页面应用也就不在话下，即便更复杂，也不会比这个高到哪里去。 源码地址： https://github.com/bailicangdu/vue2-elm 技术栈 vue2 + vuex + vue-router + webpack + ES6/7 + fetch 2、一般涉及到money的网页逻辑都比较复杂，尤其像饿了么这样一个开放的平台，商家和食品种类繁多，页面与页面之间交互复杂，在写到 购物车 和 下单 功能时众多的数据和逻辑一度让人很头疼，又没有设计和接口 3、vue因其轻量级的框架在中小型项目中表现亮眼，在大型单页面应用中因为vuex的存在，表现依然出色，在处理复杂交互逻辑的时候，vuex的存在是不可或缺的。 所以说利用 vue + vuex 完全可以去做大型的单页面项目。
2.5K90发布于 2018-01-15来自专栏农历七月廿一SPA（单页面应用）的基本实现原理
写在前面 我们应该都使用过网易云音乐或者是别的一些逼格比较高的网页，他们比较厉害的一点是页面看起来只有一个，不管你点击什么地方，永远不会刷新页面，都是感觉是在一个页面上完成的操作，这个逼格那么高的页面是怎么实现的呢 源码已经上传到Github上：spa应用的简单实现 我们首先看一下效果： ? 那么之前我说过，遇到一个问题怎么办？ text-decoration: none; margin-left: 1rem; } input{ width: 10rem; height: 2rem /json/all_name.json', success:function(data){ $("#name").val(data[2].name); $("#text ").val(data[2].text); } }); break; default : $.ajax({ url:'.
1.3K20发布于 2020-05-29来自专栏开发三两事vue单页面应用首次访问速度优化
应用背景：应用采用前后端分离开发，前端直接使用nginx部署vue打包文件提供访问需要； 问题阐述：vue大页面应用直接npm run build进行打包，前端部署后首次访问速度缓慢，基本需要40秒左右 components/tabar'], resolve) Vue.component('tabar', tabar); 即可做到使用时才加载的效果，但是初次加载时候还是会有很大的文件 2、 on; 大概可以让文件再缩小一半，通过以上优化，我的1m网速服务器基本可以做到1秒左右打开服务器（有时候取决于cdn的网速， 很关键） 总结：以上优化操作，基本可以将我最初40秒初始访问页面速度提升到 1、2秒，文件请求大概缩小到50kb左右
1.6K41发布于 2020-12-30来自专栏全栈程序员必看vue等单页面应用及其优缺点
先来说说什么是单页面应用和多页面应用： 单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。 所有的页面内容都包含在这个所谓的主页面中。 多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新。 单页面的优点和缺点： 优点： 1、用户体验好，快，内容的改变不需要重新加载整个页面，对服务器压力较小。 2、前后端分离，比如vue项目 3、完全的前端组件化，前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改 和调整； 2、不利于 SEO优化，单页页面，数据在前端渲染，就意味着没有 SEO。 3、页面导航不可用，如果一定要导航需要自行实现前进、后退。
85510编辑于 2022-09-12来自专栏Python in AI-IOTWeb开发---单页面应用(签到日报--技术实现)
疫情前期，员工分布在各个地区，需要上报个人的健康状态和位置信息，于是做了一个单页面应用（当时钉钉和微信上的健康上报模板还没出现） image.png 本文介绍前端和后台实现。 由于是单页面程序，它的实现代码还是比较复杂的。 html代码： <! -- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --> <! template" id="panelsTemplate"> <% _.each(persons,function(item,index){ %> <% if ((index%2) col2) { var row2 = col2.parent(); row1.prepend(col2);
1K00发布于 2020-03-16来自专栏Python in AI-IOTWeb开发---单页面应用(签到日报--历史统计)
疫情前期，员工分布在各个地区，需要上报个人的健康状态和位置信息，于是做了一个单页面应用（当时钉钉和微信上的健康上报模板还没出现） 本文介绍查看自己的历史签到信息和查看所有人的历史签到信息。
74810发布于 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来为它们做了端口映射，同时做了静态文件代理。
71300发布于 2020-03-16来自专栏TopFE前端单页面应用分布式部署探索
但是这条思路有几个问题需要提前解决一下 1:外部路由定位到内部内容的问题 2:组件资源依赖,版本管理的问题 3:域名部署,iframe操作的封装 4:跨应用 跨iframe的状态管理.
59810编辑于 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 实现单页面应用的路由功能
nav-link" active-class="active">用户 1</router-link> <router-link :to="{ name: 'User', params: { id: <em>2</em> } }" class="nav-link" active-class="active">用户 2</router-link> <!
38810编辑于 2025-08-13
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号