Vue页面堆栈管理器详情
目录
- 2、尝试过的方法
- 2.1 keep-alive
- 2.2 CSS配合嵌套route
- 3、功能说明
- 4、安装和用法
- 5、API
- 5.1 注册
- 5.2 前进和后退
- 6、相关说明
- 6.1 keyName
- 6.2 原理
A vue page stack manager Vue
页面堆栈管理器 vue-page-stack
【Vue页面堆栈管理器详情】示例展示了一般的前进、后退(有activited)和replace的场景,同时还展示了同一个路由可以存在多层的效果(输入必要信息)目前版本还没有经过整体业务的测试,欢迎有同样需求的进行试用
预览
1、需求分析
由于重度使用了Vue全家桶在
web App
、公众号和原生Hybrid
开发,所以很自然的会遇到页面跳转与回退这方面的问题。场景举例:
- 列表页进入详情页,然后回退
- 某操作页A需要在下一页面B选择,选择后需要退回到A页面(A页面还要知道选择了什么)
- 在任意页面进入到登录页面,登录或者注册成功后返回到原页面,并且要保证继续回退是不会到登陆页面的
- 支持浏览器的
back
和forward
(微信或者小程序很有用) - 在进入、退出或者某些特殊页面的时候添加一些动画,比如模仿
ios
的默认动画(进入是页面从右向左平移,退出是页面从左向右平移)
2、尝试过的方法 尝试了以下方法,但是都没有达到我的预期
2.1 keep-alive
一般是使用两个
router-view
通过route
信息和keep-alive
控制页面是否缓存,这样存在两个问题:keep-alive
对相同的页面只会存储一次,不会有两个版本的相同页面- 两个
router-view
之间没有办法使用transition
等动画
2.2 CSS配合嵌套route
曾经在查看
cube-ui
的例子的时候,发现他们的例子好像解决了页面缓存的问题,我借鉴(copy
)了他们的处理方式,升级了一下,使用CSS
和嵌套route
的方式实现了基本的需求。但是也有缺点:
- 我必须严格按照页面的层级来写我的
route
- 很多页面在多个地方需要用到,我必须都得把路由配上(例如商品详情页面,会在很多个地方有入口)
3、功能说明
- 在vue-router上扩展,原有导航逻辑不需改变
push
或者forward
的时候重新渲染页面,Stack
中会添加新渲染的页面- back或者go(负数)的时候不会重新渲染,从Stack中读取先前的页面,会保留好先前的内容状态,例如表单内容,滚动条滑动的位置等
back
或者go(负数)的时候会把不用的页面从Stack中移除replace
会更新Stack
中页面信息- 回退到之前页面的时候有
activited
钩子函数触发 - 支持浏览器的后退,前进事件
- 支持响应路由参数的变化,例如从
/user/foo
导航到/user/bar
,组件实例会被复用 - 可以在前进和后退的时候添加不同的动画,也可以在特殊页面添加特殊的动画
4、安装和用法 安装:
npm install vue-page-stack# ORyarn add vue-page-stack
使用:
import Vue from 'vue'import VuePageStack from 'vue-page-stack'; // vue-router是必须的Vue.use(VuePageStack, { router }); // App.vue
5、API
5.1 注册
注册的时候可以指定
VuePageStack
的名字和keyName
,一般不需要Vue.use(VuePageStack, { router, name: 'VuePageStack', keyName: 'stack-key' });
5.2 前进和后退
想在前进、后退或者特殊路由添加一些动画,可以在
router-view
的页面通过watch $route
,通过stack-key-dir
(自定义keyName
这里也随之变化)参数判断此时的方向,可以参考实例6、相关说明
6.1 keyName
为什么会给路由添加
keyName
这个参数,是为了支持浏览器的后退,前进事件,这个特点在微信公众号和小程序很重要6.2 原理
获取当前页面
Stack
部分参考了keep-alive
的部分这个插件存在我心中很久了,断断续续做了好久,终于被我搞定了,真的非常开心。
目前版本还没有经过整体业务的测试,欢迎有同样需求的进行试用,有任何的意见或者建议,欢迎在
Github
提issue
和PR,感谢你的支持和贡献。这个插件同时借鉴了vue-navigation和vue-nav,很感谢他们给的灵感。
到此这篇关于Vue页面堆栈管理器详情的文章就介绍到这了,更多相关Vue页面堆栈管理器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- 分享!如何分分钟实现微信扫二维码调用外部浏览器打开指定页面的功能
- VueX--VUE核心插件
- vue组件中为何data必须是一个函数()
- 用npm发布一个包的教程并编写一个vue的插件发布
- vuex|vuex 基础结构
- Vue源码分析—响应式原理(二)
- VueX(Vuex|VueX(Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式)
- vue中的条件判断详解v-if|vue中的条件判断详解v-if v-else v-else-if v-show