由于最近开始要做mobile的webapp 项目，所以利用周末的时间思考了下页面的体验问题，我主要参考了"微信"的页面体验，总结主要有2个页面切换效果（点击进入页面效果 和 返回上级页面效果），以下内容的分析我默认已经有vue的开发基础了。

最终效果如下图：

第一步: 页面的动态化 transition参数，是统一获取的。

第二步: app来维护pageTransitions的页面效果

第三步: router.map 路由配置如下，可以看到页面做了（头部、返回、菜单）的定制化：

第四步: 路由切换的事件拦截处理：

至此一个酷炫的页面切换效果就完成了，呼吁开发人员应该多点个人情怀。

原创《如何用vue来轻松的驾驭 html5 webapp的页面体验》的更多相关文章

  1. 原创《分享（Angular 和 Vue）按需加载的项目实践优化方案》

    针对前端优化的点有很多,例如:图片压缩,雪碧图,js/css/html 文件的压缩合并,  cdn缓存, 减少重定向, 按需加载 等等 最近有心想针对 ionic项目 和 vue项目,做一个比较大的优 ...

  2. Vue按需加载提升用户体验

    Vue官方文档异步组件: 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了让事情更简单, Vue.js 允许将组件定义为一个工厂函数,动态地解析组件的定义.Vue.js 只在组 ...

  3. vue按需加载组件-webpack require.ensure

    使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash].j ...

  4. vue 按需加载，缓存，导航守卫

    开发中的注意事项:代码性能的优化 1. 减少对第三方的依赖,降低耦合度 2. 加强组件的重复利用率 3. 按需加载 4. 缓存 (尽量发送请求后保存数据) 5. 开发过程中,尽量有着面向对象的思想,这 ...

  5. vue按需加载组件,异步组件

    说实话,我一开始也不知道什么叫按需加载组件,组件还可以按需加载???后来知道了 学不完啊...没关系,看我的 按需加载组件,或者异步组件,主要是应用了component的 is 属性 template ...

  6. 关于VUE首屏加载过长的优化，VUE项目开发优化

    1. 按需引入UI组件 当下市面上流行的UI组件基本都支持按需加载,本文以Element UI为例: (1)     新建一个elementUI.js文件 (2)     访问地址找到按需引入方式的说 ...

  7. vue 按需加载

    vue 构建单页面应用,但是问题是随着系统的体积变大,js文件也体积太大了,这时候就需要按需要进行加载了 vue-router提供了懒加载的方式 const Foo = resolve => r ...

  8. 三步解决 vue 按需加载

    1  webpack 的 output 配置 chunkFleName 树干名称: " chunks/[name]-[chunkhash:8].js  " 这一步是配合第三步, 生 ...

  9. vue中的懒加载和按需加载

    懒加载 (1)定义:懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. (2)异步加载的三种表示方法: 1. resolve => require([URL], resolve),支持性好 ...

  10. requirejs按需加载angularjs文件

    之前分享了一篇用ocLazyLoad实现按需加载angular js文件的博客.本来当时想会使用一种方法就行了.可最近刚好有时间,在网上查找了一下requirejs实现angular js文件按需加载 ...

随机推荐

  1. linux 标注主机别名

    vi /etc/bashrc # Turn on checkwinsize  shopt -s checkwinsize  [ "$PS1" = "\\s-\\v\\\$ ...

  2. css学习_css3过渡

    1.css3过渡 注意:记住多属性设置的方式:若把过渡写在了hover里面的话鼠标移走时不会有过渡效果!:不同属性同时变时用  all 就可以实现了. 2.css3  transform属性 1.移动 ...

  3. vue中router.go、router.push和router.replace的区别

    router.go(n) 这个方法的参数是一个整数,意思是在history记录中向前或者后退多少,类似window.history.go(n) router.push(location) 想要导航到不 ...

  4. POI导出excel列宽自适应

    让单元格宽度随着列和单元格值的宽度自适应: //存储最大列宽 Map<Integer, Integer> maxWidth = new HashMap<>(); // 将列头设 ...

  5. oracle多行合并一行

    以上图为例 执行SQL语句: select d.group_id,to_char(wm_concat(d.tag)) from Imglib_Group_Tag d where d.group_id= ...

  6. Fiddler忽略捕捉大文件流

    Fiddler是款非常不错的抓包软件,可以方便的捕捉各种软件发起的HTTP请求,甚至可以在发送给服务器前或响应给应用前修改数据.但是在使用时发现,在开启Fiddler时,在浏览器中下载文件时不会马上弹 ...

  7. 关于SQL配置管理工具无法打开0x8004100e问题！

    今天犯了个很“2”得问题,因为在远程数据库可以访问,并且也在安装程序中有看到装有SQLserver Mamngement Studio及其它程序,所以想在本地使用数据库应该可以但没想却总是报SQL配置 ...

  8. levmar : Levenberg-Marquardt库编译

    levmar : Levenberg-Marquardt 是非线性优化的一个库 1.使用CMake生成sln项目,编译 clapack库 在levmar工程中,打开misc.c文件,在最开始添加#in ...

  9. 正则re

    1.简介 其实re在基本模块里已经介绍过,但是在爬虫中re是非常重要的,所以在这里再进行详细描述. re在解析html内容时是效率最高的,但是也是最难的,一般来说,都是结合xpath和re使用,这样解 ...

  10. np.mgrid 用法

    import numpy as np dtype=np.float32 num_anchors = 6 y, x = np.mgrid[0:4, 0:4] print(y) print(x) y = ...