进入一家新的公司,要开发移动端app项目,前端技术选型时前端组长选的是vue的多页面开发,当时很蒙,vue不是单页面开发吗?咋出来多页面的。接触之后才发现确实存在也挺简单的,省去了路由表的配置。那就给大家整体思路分析一波吧。不足之处还请包涵!

单页面开发我就不多说了,主要讲多页面的开发模式与最终效果,网上一搜单页面会有好多文章博客,但是搜多页面的就很少了,比如下面这个就是列了一下两种开发模式的优缺点。

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

那这么多页面之间如果有参数需要互相传递,这时就只能借用localStorage本地存储了,或者封装一个全局传参方法,挂载注册到main.js里,我是封装的localStorage方法。

如果页面之间相互跳转,没有单页面路由了,那就只能是window.location.href了,alertDialog里的哪个app.openView是安卓跳转方法,其实就相当于下面的注释。

那么这些页面最终也需要打包,最核心的就是下面方框里的代码了,chunk最终就是每个页面的文件名,对应的就是文件名.html.

glob是打包多页面的一个方案插件,最后把pages对象抛出就行了。

vue多页面与单页面开发的区别。的更多相关文章

  1. Vue 子路由 与 单页面多路由 的区别

    本文地址:http://www.cnblogs.com/veinyin/p/7911292.html 最近学完了基础课程,打算整理一波笔记,对基本概念梳理一遍,惊觉对子路由和单页面多路由混淆的一塌糊涂 ...

  2. 电商网站前端架构#1 多页面 vs 单页面

    课程地址:http://www.imooc.com/learn/186 讲师:远人 课程基础: html css js ,做过一些项目. 多页面 我们往常使用的web服务大多是多页面形式,依靠后端的架 ...

  3. 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)

    1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...

  4. vue环境搭建及单页面标签切换实例

    复习 """ 1.指令: v-once: <p v-once>{{ msg }}</p> v-cloak: 防止页面加载抖动 v-show:绑定的 ...

  5. webpack配合vue.js实现完整的单页面demo

    本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的 ...

  6. 处理 Vue 单页面应用 SEO 的另一种思路

    vue-meta-info 官方地址: monkeyWangs/vue-meta-info (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plu ...

  7. 处理 Vue 单页面 SEO 的另一种思路

    vue-meta-info 官方地址: https://github.com/monkeyWang... (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender- ...

  8. Nginx 解决WebApi跨域二次请求以及Vue单页面问题

    一.前言 由于项目是前后端分离,API接口与Web前端 部署在不同站点当中,因此在前文当中WebApi Ajax 跨域请求解决方法(CORS实现)使用跨域处理方式处理而不用Jsonp的方式. 但是在一 ...

  9. 移动H5页面微信支付踩坑之旅(微信支付、单页面路由模拟、按钮加锁、轮询等常见功能)

    开发背景: .net混合开发的vue模板语法的单页面应用,所以不存在脚手架以及没有路由可以跳转. 项目描述: 需要写两个页面,在订单详情页需要点击“请输入手机号”进入手机号绑定页面,手机号绑定成功后自 ...

随机推荐

  1. vue-element-admin实战 | 第二篇: 最小改动接入后台实现根据权限动态加载菜单

    一. 前言 本篇基于 有来商城 youlai-mall微服务项目,通过对vue-element-admin的权限菜单模块理解个性定制其后台接口,实现对vue-element-admin工程几乎不做改动 ...

  2. yml文件

    博文内容来自https://blog.csdn.net/chang_li/article/details/78667652 项目里用到yml文件作为配置文件,了解下其实挺简单,它的基本语法如下 大小写 ...

  3. Java基础一篇过(四)List这篇就够了

    文章更新时间:2020/08/03 一.List介绍 list是Java的一个接口,继承了Collection,常用到的有3个子类实现: ArrayList 底层数据结构是数组.线程不安全 Linke ...

  4. dubbo学习(七)dubbo项目搭建--生产者(服务提供者)

    PS:  项目架子以及工程间的maven依赖配置暂时省略,后续看情况可能会单独写一篇文章捋捋框架结构,先马克~ 配置和启动 1.pom文件引入dubbo和zookeeper的操作客户端 <!-- ...

  5. 《InnoDB存储引擎》笔记

    第1章 Mysql体系结构和存储引擎 1.1 定义数据库和实例 数据库:database,物理的操作系统文件或其他形式文件类型的集合.当使用NDB存储引擎时,数据库文件可能是存放在内存中而不是磁盘之上 ...

  6. Centos-显示文件类型-file

    file 长度为0的文件则显示为空位文件,对于软链接文件则显示链接的真实文件路径,默认输出会有文件名 相关选项 -b 只显示文件类型结果 -L 显示软链接指向文件的类型 -z 显示压缩文件信息 -i ...

  7. 票房和口碑称霸国庆档,用 Python 爬取猫眼评论区看看电影《我和我的家乡》到底有多牛

    今年的国庆档电影市场的表现还是比较强势的,两名主力<我和我的家乡>和<姜子牙>起到了很好的带头作用. <姜子牙>首日破 2 亿,一举刷新由<哪吒之魔童降世&g ...

  8. windows10开机后恢复关机前打开的chrome网页

    开始-设置-账户-登录选项-隐私,下面一个"更新或重启后--"即第二个开关打开. 这时,无论是重启.更新重启或关机后开机,均可恢复原关机时的网页(和应用). 注:题主安装的wind ...

  9. 063 01 Android 零基础入门 01 Java基础语法 08 Java方法 01 无参无返回值方法

    063 01 Android 零基础入门 01 Java基础语法 08 Java方法 01 无参无返回值方法 本文知识点:无参无返回值方法 无参无返回值方法 案例 为什么使用方法?--方便复杂问题调用 ...

  10. python双向链表的实现

    python双向链表和单链表类似,只不过是增加了一个指向前面一个元素的指针,下面的代码实例了python双向链表的方法 示意图: python双向链表实现代码: # -*- coding: utf-8 ...