vue 单页应用和多页应用的优劣

多页应用

每一次页面跳转的时候，后台服务器都会给返回一个新的html文档，这种类型的网站也就是多页网站，也叫做多页应用。

为什么多页应用的首屏时间快？

首屏时间叫做页面首个屏幕的内容展现的时间，当我们访问页面的时候，服务器返回一个html，页面就会展示出来，这个过程只经历了一个HTTP请求，所以页面展示的速度非常快。

为什么搜索引擎优化效果好（SEO）？

搜索引擎在做网页排名的时候，要根据网页内容才能给网页权重，来进行网页的排名。搜索引擎是可以识别html内容的，而我们每个页面所有的内容都放在Html中，所以这种多页应用，seo排名效果好。

但是它也有缺点，就是切换慢

因为每次跳转都需要发出一个http请求，如果网络比较慢，在页面之间来回跳转时，就会发现明显的卡顿。

单页应用

第一次进入页面的时候会请求一个html文件，刷新清除一下。切换到其他组件，此时路径也相应变化，但是并没有新的html文件请求，页面内容也变化了。
原理是：JS会感知到url的变化，通过这一点，可以用js动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前页面上，这个时候的路由不是后端来做了，而是前端来做，判断页面到底是显示哪个组件，清除不需要的，显示需要的组件。这种过程就是单页应用，每次跳转的时候不需要再请求html文件了。

为什么页面切换快？

页面每次切换跳转时，并不需要做html文件的请求，这样就节约了很多http发送时延，我们在切换页面的时候速度很快。

缺点：首屏时间慢，SEO差

单页应用的首屏时间慢，首屏时需要请求一次html，同时还要发送一次js请求，两次请求回来了，首屏才会展示出来。相对于多页应用，首屏时间慢。
SEO效果差，因为搜索引擎只认识html里的内容，不认识js的内容，而单页应用的内容都是靠js渲染生成出来的，搜索引擎不识别这部分内容，也就不会给一个好的排名，会导致单页应用做出来的网页在百度和谷歌上的排名差。

有这些缺点，为什么还要使用Vue呢？

Vue还提供了一些其它的技术来解决这些缺点，比如说服务器端渲染技术(我是SSR)，通过这些技术可以完美解决这些缺点，解决完这些问题，实际上单页面应用对于前端来说是非常完美的页面开发解决方案。

新的更新

最近在改造公司的项目，公司的项目是单页应用，可能会改成多页应用，所以对这块又重新看了一下。在网上看到一个表格觉得总结的很到位，贴过来。我是表格出处

mm 多页应用模式MPA 单页应用模式SPA
应用构成 由多个完整页面构成 一个外壳页面和多个页面片段构成
跳转方式 页面之间的跳转是从一个页面跳转到另一个页面 页面片段之间的跳转是把一个页面片段删除或隐藏，加载另一个页面片段并显示出来。这是片段之间的模拟跳转，并没有开壳页面
跳转后公共资源是否重新加载 是 否
URL模式
http://xxx/page1.html

http://xxx/page1.html
http://xxx/shell.html#page1

http://xxx/shell.html#page2
用户体验 页面间切换加载慢，不流畅，用户体验差，特别是在移动设备上 页面片段间的切换快，用户体验好，包括在移动设备上
能否实现转场动画 无法实现 容易实现（手机app动效）
页面间传递数据 依赖URL、cookie或者localstorage，实现麻烦 因为在一个页面内，页面间传递数据很容易实现
搜索引擎优化（SEO） 可以直接做 需要单独方案做，有点麻烦
特别适用的范围 需要对搜索引擎友好的网站 对体验要求高的应用，特别是移动应用
搜索引擎优化（SEO） 可以直接做 需要单独方案做，有点麻烦
开发难度 低一些，框架选择容易 高一些，需要专门的框架来降低这种模式的开发难度

以上就是vue 单页应用和多页应用的优劣的详细内容，更多关于vue 单页应用和多页应用的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 手把手教你vue-cli单页到多页应用的方法

    vue-cli到多页应用 前言:我有一个cli创建的vue项目,但是我想做成多页应用,怎么办,废话不多说,直接开撸~ 约定:新增代码部分在//add和//end中间 删除(注释)代码部分在//del和//end中间,很多东西都写在注释里 第一步:cli一个vue项目 新建一个vue项目 官网 vue init webpack demo cli默认使用webpack的dev-server服务,这个服务是做不了单页的,需要手动建一个私服叫啥你随意 一般叫dev.server或者dev.client

  • 详解如何使用 vue-cli 开发多页应用

    本文介绍了如何使用 vue-cli 开发多页应用,分享给大家,具体如下: 修改的webpack配置文件 全局配置 修改 webpack.base.conf.js 打开 ~\build\webpack.base.conf.js ,找到entry,添加多入口 entry: { app: './src/main.js', app2: './src/main2.js', app3: './src/main3.js', }, 运行.编译的时候每一个入口都会对应一个Chunk run dev 开发环境 修改

  • webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法

    批处理 前端现在在做项目的时候大多数遇到的都是单页面应用,但有时需要做多页面的时候,会把单页拿过来修改成多页面,如果代码多了,对单页或多页的配置可能会混乱,那么有没有更好的方式能把单页面和多页面不同的配置代码分开,能更清楚的分辩他们的区别,这里是利用 批处理 对前端构建进行部署 git地址目录分为三块 single //单页代码 share // 共用代码 many //多页代码 只需要用到 批处理 对其中两者进行合并就能生成想要的单页或多页应用,提示需要安装国内的 npm淘宝镜像 如果未安装的

  • 详解vue-cli3多页应用改造

    需求 一个平台P,包含产品a.b.c.d.e.各产品UI样式风格统一,且会用到公共配置(HOST.是否添加埋点js).组件(头部导航.表格.搜索框).方法(请求拦截.生成UUID). 现状:由于历史遗留原因,各产品为独立SPA.各自维护,配置.组件也都自成一体,只是大概样式上保持了一致,但细节(比如同一面包屑样式,左边距5px.8px都有)都不一致. 这种情况下,改组件.改配置都得一改改多个地方,且有些项目是vue-cli2.有些是vue-cli3,项目间依赖包的版本也不一致,维护起来非常不友好

  • vue-cli单页应用改成多页应用配置详解

    vue-cli单页应用改成多页应用配置详解

    前言 从接触vue开始用的是vue-cli直接搭建单页应用,参考配合着vue-router开发起来简直爽到吊炸天,但是由于项目越来越复杂了,单页用起来可能有点力不从心,能不能弄成多页面呢,查了相关资料得到的结论是完全可以的,能多页面多入口,并且可以使用组件,还引入jQuery,这简直完美了,这个demo是从我已经改造完成的项目中摘出来的,现在演示下怎么把基于vue2的vue-cli单页模板改造成多页面,并且多入口的项目. 技术栈 vue: 2.0.1 vue-resource:1.0.3 vue

  • vue 如何从单页应用改造成多页应用

    最近接到这样一个需求,将之前的三个项目合并成一个,并且要做成后台可配置化,前端动态引入组件的模板化框架. 听起来是不是很拗口...我自己当时都蒙了. 简单分析下需求,就是,项目A/B/C的内容是交叉的,有的页面不同,有的页面和组件是公用的,例如A项目多了个人中心及其里面所有内容(最全的一个项目,但是是放在微信中的,需要获取微信授权),B项目是通用版的项目(也就是说可以放在微信,也可以放在app内,不需要获取授权之类的.),C项目是A/B项目中共有的一个页面功能抽取出来了. 所以有的时候比如说这块

  • Vue单页及多页应用全局配置404页面实践记录

    前后端分离后,控制路由跳转的责任转移到了前端,后端只负责给前端返回一个html文档以及提供各种接口.下面我们用作例子的两个项目,均采用vue作为基础框架,一个是SPA应用,另一个是多页应用,均由前端进行路由控制及渲染的. 总体思路 无论单页还是多页,我的实现思路是总体配置404页面的思路就是在前端路由表中添加一个 path: '/404' 的路由,渲染相应的404页面.同时,配置一个规则,当在用户可访问的路由表中的所有路由都无法匹配的时候,自动跳转重定向至该404页面.下面来说一下针对单页和多页

  • 详解Vue CLI3 多页应用实践和源码设计

    对于一个网站来说,即需要h5页面也同时需要web页面,而h5和web页面共用很多代码,不做响应式,只能拆分两个页面来写,一个h5,一个web.用vue cli3怎么配置h5与web的应用呢? 解决思路: 首先,需要产生多页面应用,用webpack配置成多页面应用,一个h5一个web,这个网上已经有很多教程了,下面会再整理一次,接着把所有公共的代码提到多页面目录外面. 我们看一下官网给的 multi-page 的配置:需要在 vue.config.js 配置 pages,示例如下: pages:

  • Vue CLI3基础学习之pages构建多页应用

    Vue CLI3基础学习之pages构建多页应用

    前言 首先我们可以把多页应用理解为由多个单页构成的应用,而何谓多个单页呢?其实你可以把一个单页看成是一个 html 文件,那么多个单页便是多个 html 文件,多页应用便是由多个 html 组成的应用,如下图所示 既然多页应用拥有多个 html ,那么同样其应该拥有多个独立的入口文件.组件.路由. vuex 等.没错,说简单一点就是多页应用的每个单页都可以拥有单页应用 src 目录下的文件及功能,我们来看一下一个基础多页应用的目录结构 ├── node_modules              

  • Vue单页式应用(Hash模式下)实现微信分享的实例

    本文介绍了Vue单页式应用(Hash模式下)实现微信分享的实例,分享给大家,具体如下: 前端微信分享的基本步骤: 一.绑定域名: 先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名".这个不多说,微信开发的都应该清楚. 二.引入js文件: 在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js. 请注意,如果你的页面启用了ht

  • vue单页应用中如何使用jquery的方法示例

    前言 本文给大家介绍的是关于在vue单页应用中使用jquery的相关内容,主要记录一个今天用到的vue-cli建立的应用中引入jquery的方式.下面话不多说,来一起看看详细的介绍吧. 方法如下: 1.首选通过npm安装jquery npm install jquery --save 2.在build/webpack.base.conf文件当中引入jquery module.exports = { ... resolve: { extensions: ['.js', '.vue', '.json

  • vue单页应用加百度统计代码（亲测有效）

    申请百度统计后,会得到一段JS代码,需要插入到每个网页中去,在Vue.js项目首先想到的可能就是,把统计代码插入到index.html入口文件中,这样就全局插入,每个页面就都有了;这样做就涉及到一个问题,Vue.js项目是单页应用,每次用户浏览网站时,访问内页时页面是不会刷新的,也就意味着不会触发百度统计代码:所以最终在百度统计后台看到的效果就是只统计到了网页入口的流量,却无法统计到内页的访问流量. 解决方法 在main.js文件中调用vue-router的afterEach方法,将统计代码加入

  • 解决vue单页使用keep-alive页面返回不刷新的问题

    使用vue单页开发项目时遇到一个很恶心的问题:在列表页点击一条数据进入详情页,按返回键返回列表页时页面刷新了,用户体验非常差啊!!!查阅了一下相关问题,使用<keep-alive>解决这个问题,下面是我的使用心得. <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. 首先在App.vue页面上有下面一段代码,我们都知道这是页面渲染的地方 <router-view></router-view> 把这段代码改成

  • Vue单页应用引用单独的样式文件的两种方式

    Vue单页应用引用单独的样式文件的两种方式

    问题描述 对于.vue的文件来说,也是由结构.行为.样式三部分组成,在样式部分有个scoped的属性,也就是当前页面有效,当style标签内样式比较多时或者.vue文件之间有重复的时候,总感觉看起来不够整洁,所以就需要引入一些公共样式.下面就先说下如何引入单独的样式文件,这里就以CSS文件为例,之后再说下我的项目中的样式文件的划分 引入单独的样式文件 方式一 在main.js中引入静态资源,这种方法使得该样式文件被项目中的组件所共享 // The Vue build version to loa

  • 解决vue单页路由跳转后scrollTop的问题

    作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部. 最开始我使用了一个很笨的方法,每个页面上都加上window.scrollTop(0,0);来解决问题,但是这个太繁琐了.最后和小伙伴们商量了一下,在main.js页面上加了这么一段代码 router.afterEach(function (to) { window.scrollTo(0, 0) }) 路由跳

  • vue单页缓存方案分析及实现

    实现全站的页面缓存,前进刷新,返回走缓存,并且能记住上一页的滚动位置,参考了很多技术实现,github上的导航组件实现的原理要么使用的keep-alive,要么参考了keep-alive的源码,但是只用keep-alive没法实现相同path,不同参数展示不同view,这就有点坑了,所以需要结合自己要实现的功能,适当改造keep-alive,为了实现每次前进都能刷新,返回走缓存还能自动定位的功能,文章陆续从以下几个方面展开讲:两套技术方案可选,最后定的技术方案的原因,实现的功能和原理,踩过的坑

  • vue单页缓存存在的问题及解决方案(小结)

    1.css同名覆盖,解决方法:父组件加上scoped <style lang="scss" scoped> @import './unbind.scss' </style> 子组件同名样式加上deep /deep/ .tabs-row { .items-wrp{ padding-left: .34rem; } .item { margin:0 .12rem .16rem 0; } } 2.事件全局绑定 绑在window或document或body上的事件,切换到

  • vue单页开发父子组件传值思路详解

    vue单页开发时经常需要父子组件之间传值,自己用过但是不是很熟练,这里我抽空整理了一下思路,写写自己的总结. GitHub地址:https://github.com/leileibrother/wechat-vue 文件目录如下图,example.vue是父组件,exampleChild.vue是子组件. 父组件引入子组件,父组件html的代码如下: <template> <div> <h3>这是父组件</h3> <p style="marg

  • vue单页应用的内存泄露定位和修复问题小结

    在前端项目(PC端)中,内存泄露的定位往往比修复更加困难,即使google浏览器有提供Memory工具,但是面对成千上万的元素和错综复杂的引用关系,开发则依然很难快速定位到问题代码块. 一.什么是内存泄漏? 系统进程不再用到的内存,没有及时释放,就叫做内存泄漏(memory leak).当内存占用越来越高,轻则影响系统性能,重则导致进程崩溃.Chrome限制了浏览器所能使用的内存极限(64位为1.4GB,32位为1.0GB),这也就意味着浏览器将无法直接操作一些大内存对象. V8引擎在执行垃圾回

随机推荐