脚本宝典收集整理的这篇文章主要介绍了Vue页面堆栈管理器详情,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
A vue page stack manager Vue
页面堆栈管理器 vue-page-stack
示例展示了一般的前进、后退(有activITed)和replace的场景,同时还展示了同一个路由可以存在多层的效果(输入必要信息)
目前版本还没有经过整体业务的测试,欢迎有同样需求的进行试用
由于重度使用了Vue全家桶在web App
、公众号和原生Hybrid
开发,所以很自然的会遇到页面跳转与回退这方面的问题。
场景举例:
back
和forward
(微信或者小程序很有用)ios
的默认动画(进入是页面从右向左平移,退出是页面从左向右平移)尝试了以下方法,但是都没有达到我的预期
一般是使用两个router-view
通过route
信息和keep-alive
控制页面是否缓存,这样存在两个问题:
keep-alive
对相同的页面只会存储一次,不会有两个版本的相同页面router-view
之间没有办法使用transition
等动画曾经在查看cube-ui
的例子的时候,发现他们的例子好像解决了页面缓存的问题,我借鉴(copy
)了他们的处理方式,升级了一下,使用CSS
和嵌套route
的方式实现了基本的需求。
但是也有缺点:
route
push
或者forward
的时候重新渲染页面,Stack
中会添加新渲染的页面back
或者go(负数)的时候会把不用的页面从Stack中移除replace
会更新Stack
中页面信息activited
钩子函数触发 /user/foo
导航到 /user/bar
,组件实例会被复用安装:
npm install vue-page-stack # OR yarn add vue-page-stack
使用:
import Vue From 'vue' import VuePageStack from 'vue-page-stack'; // vue-router是必须的 Vue.use(VuePageStack, { router }); // App.vue <template> <div id="app"> <vue-page-stack> <router-view ></router-view> </vue-page-stack> </div> </template> <script> export default { name: 'App', data() { return { }; }, components: {}, created() {}, methods: {} }; </script>
注册的时候可以指定VuePageStack
的名字和keyName
,一般不需要
Vue.use(VuePageStack, { router, name: 'VuePageStack', keyName: 'stack-key' });
想在前进、后退或者特殊路由添加一些动画,可以在router-view
的页面通过watch $route
,通过stack-key-dir
(自定义keyName
这里也随之变化)参数判断此时的方向,可以参考实例
为什么会给路由添加keyName
这个参数,是为了支持浏览器的后退,前进事件,这个特点在微信公众号和小程序很重要
获取当前页面Stack
部分参考了keep-alive
的部分
这个插件存在我心中很久了,断断续续做了好久,终于被我搞定了,真的非常开心。
目前版本还没有经过整体业务的测试,欢迎有同样需求的进行试用,有任何的意见或者建议,欢迎在 Github
提issue
和PR,感谢你的支持和贡献。
这个插件同时借鉴了vue-navigation和vue-nav,很感谢他们给的灵感。
到此这篇关于Vue页面堆栈管理器详情的文章就介绍到这了,更多相关Vue页面堆栈管理器内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典!
以上是脚本宝典为你收集整理的Vue页面堆栈管理器详情全部内容,希望文章能够帮你解决Vue页面堆栈管理器详情所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。