vue单页应用和和多页应用的区别
个人见解如下:
单页面应用(SinglePage Web Application )简称:SPA
多页面应用 (MultiPage Application) 简称:MPA
组成一个外壳和多个页面片段组成多个完整页面,构成资源共用(css,js),只需在外壳部分加载不共用,每个页面都需要加载
区别:
刷新方式
SPA: 页面局部刷新或更改
MPA: 整页刷新
url模式
SPA: a.com/#/pageone a.com/#/pagetwo
MPA: a.com/pageone.html a.com/pagetwo/html
用户体验:
SPA: 页面片段间时间的切换快,用户体验良好
MPA:页面切换加载缓慢,流畅度不够,用户体验比较差
转场动画:
SPA: 容易实现转场动画
MPA:无法实现专场动画
数据传递:
SPA: 容易实现数据传递,方法有很多(通过路由带参数传值,Vuex传值等等)
MPA: 依赖url传参,cookie , 本地存储等
搜索引擎优化(SEO)
SPA: 需要单独方案,实现较为困难,不利于SEO检索,可利用服务器端渲染(SSR)优化
MPA:实现方法容易
使用范围:
SPA:高要求的体验度、追求界面流畅的应用
MPA:适用于追求高度支持搜索引擎的应用
开发成本:
SPA: 较高,长需要借助专业的框架
MPA:较低,但也页面代码重复的多
维护成本:
SPA:相对容易
MPA: 相对复杂
vue单页应用和和多页应用的区别的更多相关文章
- vue单页面项目返回上一页无效,链接变化了,但是页面没有变化
在最近的项目中,返回上一页没有效果,经过好久的排查才发现问题,是路由守卫写法不规范导致. 在项目中用路由守卫做了登录拦截,没登录的跳转到登录页面.页面跳转和拦截都没问题,但是返回上一页就不行了,也没有 ...
- 如何在vue单页应用中使用百度地图
作为一名开发人员,每次接到开发任务,我们首先应该先分析需求,然后再思考技术方案和解决方案.三思而后行,这是一个好的习惯. 需求:本项目是采用vue组件化开发的单页应用项目,现需要在项目中引入百度的地图 ...
- vue单页应用前进刷新后退不刷新方案探讨
引言 前端webapp应用为了追求类似于native模式的细致体验,总是在不断的在向native的体验靠拢:比如本文即将要说到的功能,native由于是多页应用,新页面可以启用一个的新的webview ...
- 解决vue单页路由跳转后scrollTop的问题
作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路 ...
- vue单页应用中 返回列表记住上次滚动位置、keep-alive缓存之后更新列表数据 那点事
实践场景需求 产品列表中,滚动到一定位置的时候,点击查看产品信息,后退之后,需要回到原先的滚动位置,这是常见的需求 所有页面均在router-view中,暂时使用了keep-alive来缓存所有页面, ...
- 基于vue单页应用的例子
代码地址如下:http://www.demodashi.com/demo/13374.html 目录结构 src目录 主要的代码目录 components 存放项目组件 router 路由文件 sto ...
- vue 单页应用中微信支付的坑
vue 单页应用中微信支付的坑 标签(空格分隔): 微信 支付 坑 vue 场景 在微信H5页面(使用 vue-router2 控制路由的 vue2 单页应用项目)中使用微信 jssdk 进行微信支付 ...
- Vue 基于node npm & vue-cli & element UI创建vue单页应用
基于node npm & vue-cli & element UI创建vue单页应用 开发环境 Win 10 node-v10.15.3-x64.msi 下载地址: https ...
- phpcms v9自定义表单提交后返回上一页实现方法
PHPcms v9中提交自定义表单后默认都是回到首页的,是不是感觉很不爽! 接下来,就说下phpcms v9自定义表单提交后返回上一页实现方法. 1.找到这个文件 phpcms\modules\for ...
- vue案例 - vue-awesome-swiper实现h5滑动翻页效果
说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! 中国有句古话叫:天塌下来有个高的顶着. 在前端圈里,总有前仆后继的仁人志士相继挥洒着热汗(这里 ...
随机推荐
- 第十一周Java实验作业
实验十一 集合 实验时间 2018-11-8 1.实验目的与要求 (1) 掌握Vetor.Stack.Hashtable三个类的用途及常用API: Vector类类似长度可变的数组,其中只能存放对 ...
- bluekeep漏洞(CVE-2019-0708)利用
前言 上个月爆出exp的一个高危漏洞,跟风复现一下下...( ̄▽ ̄)~* 简介 Windows再次被曝出一个破坏力巨大的高危远程漏洞CVE-2019-0708.攻击者一旦成功利用该漏洞,便可以在目标系 ...
- MySQL笔记(9)-- 各种锁及实现
一.背景 MySQL有两种类型的锁:lock(锁)和latch(闩锁): 类型 lock latch 对象 事务 线程 保护 数据库内容 内存数据结构 持续时间 整个事务 临界资源 模式 行锁.表锁. ...
- Kaggle竞赛入门:决策树算法的Python实现
本文翻译自kaggle learn,也就是kaggle官方最快入门kaggle竞赛的教程,强调python编程实践和数学思想(而没有涉及数学细节),笔者在不影响算法和程序理解的基础上删除了一些不必要的 ...
- 【WPF学习】第六十章 创建控件模板
经过数十天的忙碌,今天终于有时间写博客. 前面一章通过介绍有关模板工作方式相关的内容,同时介绍了FrameWorkElement下所有控件的模板.接下来将介绍如何构建一个简单的自定义按钮,并在该过程中 ...
- centos7中提升用户权限
提升用户权限我看网上资源有两种方法,一种是修改/etc/sudoers/文件将新增的用户权限提升为和root一样的权限,这种方法不知道怎么回事我没用应用成功,这里我介绍第二种方法,第二种方法是更改/e ...
- 少儿编程崛起?2020年4月编程语言排名发布——Java,C,Python分列前三,Scratch挤进前20
前三并没有什么悬念,依然是Java,C,Python.C与Java的差距正在缩小,不过我们不用担心,在大数据分析领域Java,Python依然都是不可或缺的. 基于图形的基于块的编程语言Scratch ...
- MATLAB GUI设计(1)
一.新建GUI 1.命令行窗口输入 guide会出来如下界面,可以新建空白GUI,也可以打开已有GUI 2.通过工具栏新建 二.数据传递例子 1.添加输入框按钮,设置尺寸大小,内容,格式,标签 2.复 ...
- Material Design 组件之NavigationView
今天来看一下 NavigationView 的使用,NavigationView 是一个标准的导航菜单,其菜单内容由菜单资源文件来填充,NavigationView 一般和 DrawerLayout ...
- IDEA 新版本激活之后老是有弹窗 解决方法
用了最新的版本的IDEA,然后用网上的方法破解到了2089年,但是打开IDEA的时候,老是出现一个弹窗,内容如下: This agent is for learning and research pu ...