目录2、尝试过的方法2.1 keep-alive2.2 CSS配合嵌套route3、功能说明4、安装和用法5、api5.1 注册5.2 前进和后退6、相关说明6.1 keyName6
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页面堆栈管理器内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: Vue页面堆栈管理器详情
本文链接: https://www.lsjlt.com/news/155243.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0