简述vue单页应用与多页应用的区别

2024-05-16 07:00:40

简述vue单页应用与多页应用的区别

文章目录

简述vue单页应用与多页应用的区别
前言
一、Vue单页应用是什么？
- 内部原理：
二、Vue多页应用是什么？
- 内部原理：
三、它俩有啥区别？
四、总结

前言

web应用，说难也不难，说不难也难。里面好多的知识，即使我们干了几年的活也未必透彻。一直听别人说单页应用多页应用，一直也没研究，因为他丝毫不影响我工作产出。今天兴趣使然，一探究竟并大白话简述~

一、Vue单页应用是什么？

就理解它为一个页面的应用，它自己和自己跳着玩，也不请求别的页面。感兴趣的可以看看调试工具里的Doc加载页面情况~

内部原理：

js做识别，判断路由发生变化。一旦路由变化js会销毁当前页面并替换新页面。

二、Vue多页应用是什么？

每个页面与每个页面都是独立的。每加载一个页面，就得发次请求。

内部原理：

页面每次请求都会向后端拿一次数据，每次都会生成一个html页面。仍然是在调试工具Doc里体现。

三、它俩有啥区别？

1、多页应用依赖后端，单页应用是前端实现。
2、性能方面来说，多页应用首屏加载较快，SEO搜索效果好。但缺点是切换页面相对较慢。这从原理上想的话也能理解，每次切换都要发请求，肯定相对慢一些。单页应用则切换速度较快，但首屏加载较慢，SEO效果较差。从SEO来讲的话，因为SEO搜索时只能识别html，并不认识js，

四、总结

个人理解为就是多页就是每次跳转需要请求一次，单页不需要请求直接靠js识别进行跳转。多页需要后台支持，单页纯前台自己实现。多页还是相比于单页较为复杂。多页or单页，只是一种方案，适合自己的项目才是最好的。最后欢迎大家补充与修正~

简述vue单页应用与多页应用的区别相关推荐

VUE单页面应用的内页很难被百度收录
这两年自己写了几个WEB项目,前端都是用的vue框架,后台大部分用的nodejs,也有用的spring的:但是他们有一个共同点:都是SPA单页面应用,并且使用HEXO框架在二级目录搭建了一个静态博客. ...
Vue—单页面应用与多页面应用的区别
目录一.概念二.区别一.概念多页面应用多页面应用,翻译为multi-page application,简称MPA.多页面应用是指每次页面跳转时,后台服务器都会返回一个新的HTML文档. 单页 ...
解决vue单页路由跳转后scrollTop的问题
作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部在我们写路 ...
基于vue单页应用的例子
代码地址如下: http://www.demodashi.com/demo/13374.html 目录结构 - src目录主要的代码目录 - components 存放项目组件 - router 路 ...
Vue 单页应用与多页应用的区别
Vue 单页应用与多页应用的区别概念: ● SPA单页面应用(SinglePage Web Application),指只有一个主页面的应用,一开始只需要加载一次js.css等相关资源.所有内容都包 ...
prerender html5,HTML5 VUE单页应用 SEO 优化之预渲染（prerender-spa-plugin）
前言:当前 SPA 架构流行的趋势如日中天,前后端分离的业务模式已经成为互联网开发的主流方式,但是单页面应用始终存在一个痛点,那就是 SEO, 对于那些需要推广,希望能在百度搜索时排名靠前的网站而 ...
VUE 返回上一页不刷新页面、重复进入同一页面created重复执行、每次进入页面时都执行created、vue单页面多路由，前进刷新，返回不刷新
每次进入页面时都执行created.前进刷新,返回不刷新思路: 利用 keep-alive与vue-router配合使用 ,判断哪些页面需要每次进入刷新,哪些页面不需要每次进入刷新: keepAli ...
Vue单页应用(SPA)及其优缺点
一.什么是单页面应用和多页应用? 单页应用:只有一个主页面的应用,一开始只需要加载一次js.css等相关资源.单页应用跳转,就是使用路由跳转切换相关组件,仅刷新局部资源. 多页应用:多个独立的页面的应 ...
db2v9/9.5高级应用开发_使用 Vue.js 2.0 开发单页应用
来源 | https://www.sitepoint.com/up-and-running-vue-js-2-0/ 早在去年9月份,流行的 JavaScript 框架 Vue.js 就发布了 V2 版 ...

最新文章

热门文章