vue多页面与单页面开发的区别。
进入一家新的公司,要开发移动端app项目,前端技术选型时前端组长选的是vue的多页面开发,当时很蒙,vue不是单页面开发吗?咋出来多页面的。接触之后才发现确实存在也挺简单的,省去了路由表的配置。那就给大家整体思路分析一波吧。不足之处还请包涵!
单页面开发我就不多说了,主要讲多页面的开发模式与最终效果,网上一搜单页面会有好多文章博客,但是搜多页面的就很少了,比如下面这个就是列了一下两种开发模式的优缺点。

首先多页开发,肯定是一个页面就是一个单独文件,每个文件也有自己的.vue .js 和compoent自身组件,如下page里的一个文件就是一个页面。

那这么多页面之间如果有参数需要互相传递,这时就只能借用localStorage本地存储了,或者封装一个全局传参方法,挂载注册到main.js里,我是封装的localStorage方法。
如果页面之间相互跳转,没有单页面路由了,那就只能是window.location.href了,alertDialog里的哪个app.openView是安卓跳转方法,其实就相当于下面的注释。

那么这些页面最终也需要打包,最核心的就是下面方框里的代码了,chunk最终就是每个页面的文件名,对应的就是文件名.html.
glob是打包多页面的一个方案插件,最后把pages对象抛出就行了。

vue多页面与单页面开发的区别。的更多相关文章
- Vue 子路由 与 单页面多路由 的区别
本文地址:http://www.cnblogs.com/veinyin/p/7911292.html 最近学完了基础课程,打算整理一波笔记,对基本概念梳理一遍,惊觉对子路由和单页面多路由混淆的一塌糊涂 ...
- 电商网站前端架构#1 多页面 vs 单页面
课程地址:http://www.imooc.com/learn/186 讲师:远人 课程基础: html css js ,做过一些项目. 多页面 我们往常使用的web服务大多是多页面形式,依靠后端的架 ...
- 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)
1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...
- vue环境搭建及单页面标签切换实例
复习 """ 1.指令: v-once: <p v-once>{{ msg }}</p> v-cloak: 防止页面加载抖动 v-show:绑定的 ...
- webpack配合vue.js实现完整的单页面demo
本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的 ...
- 处理 Vue 单页面应用 SEO 的另一种思路
vue-meta-info 官方地址: monkeyWangs/vue-meta-info (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plu ...
- 处理 Vue 单页面 SEO 的另一种思路
vue-meta-info 官方地址: https://github.com/monkeyWang... (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender- ...
- Nginx 解决WebApi跨域二次请求以及Vue单页面问题
一.前言 由于项目是前后端分离,API接口与Web前端 部署在不同站点当中,因此在前文当中WebApi Ajax 跨域请求解决方法(CORS实现)使用跨域处理方式处理而不用Jsonp的方式. 但是在一 ...
- 移动H5页面微信支付踩坑之旅(微信支付、单页面路由模拟、按钮加锁、轮询等常见功能)
开发背景: .net混合开发的vue模板语法的单页面应用,所以不存在脚手架以及没有路由可以跳转. 项目描述: 需要写两个页面,在订单详情页需要点击“请输入手机号”进入手机号绑定页面,手机号绑定成功后自 ...
随机推荐
- php中用面向对象的思想编写mysql数据库操作类
最近刚入门完mysql,正好学了一阵子php就想着如何把mysql的表信息用php打印页面上.现在就把代码贴出来,以便小伙伴们参考. 先是建立mysql连接: /*建立连接*/ class datab ...
- yum 安装提示公钥安装失败,Public key for .x86_64.rpm is not instal 手动导入公钥方案
Linux 中yum 安装google-chrome-stable时,报错如下,提示公钥安装失败,原因是 GPG公钥获取失败,无法连接获取到 https://dl-ssl.google.com/lin ...
- ScheduledExecutorService定时任务学习
scheduleAtFixedRate :每隔Xs执行任务 scheduleWithFixedDelay :上轮任务结束后的Xs后执行下次任务 如下是测试代码,就是at和with方法不同 public ...
- 基于Prometheus网关的监控完整实现参考
prometheus 是一个非常好的监控组件,尤其是其与grafana配合之后,更是如虎添翼.而prometheus的监控有两种实现方式.1. server端主动拉取应用监控数据:2. 主动推送监控数 ...
- MySQL手注之联合查询注入
了解联合查询注入之前,先要了解一下什么是union? union是用于合并两个sql查询结果的语句. 要使用union 必须有相同的列数 必须有两条以上的select语句组成 列的数据类型必须兼容 ...
- Java之再初识二
本篇博客将继续介绍Java基础知识 1.Java包含哪些数据类型 2.Java基本数据类型转换包含哪两类 3.为什么需要包装类 4.int与integer有什么区别,它们之间如何相互转化的 5.逻辑运 ...
- Presto 标量函数注册和调用过程简述
在Presto 函数开发一文中已经介绍过如何进行函数开发,本文主要讲述标量函数(Scalar Function)实现之后,是如何在Presto内部进行注册和被调用的.主要讲述标量函数是因为:三类函数的 ...
- 微信小程序-实现文字跑马灯-wepy
百度蛮多例子的,但是代码太长懒得看了 前言 要实现跑马灯主要就是获得判断开始定界和结束定界, 1.9.3新增的wxml操作接口 就可以拿到节点长宽等属性,当然你也可以直接用 文字数量 * 文字大小(注 ...
- heap是堆,stack是栈
1.栈是用来存放基本类型的变量和引用类型的变量,堆用来存放new出来的对象和数组. 2.栈的存取速度快,但不灵活.堆的存取速度慢,但是存取灵活,空间动态分配. 3.栈在建立在连续的物理位置上,而堆只需 ...
- Effective C++ 读书笔记 名博客
https://www.cnblogs.com/harlanc/tag/effective%20c%2B%2B/default.html?page=3