老哥们,介绍个自己的轮子~
由于重度使用了 Vue 全家桶在 web App、公众号和原生 Hybrid 开发,所以很自然的会遇到页面跳转与回退这方面的问题。 场景举例:
尝试了以下方法,但是都没有达到我的预期
一般是使用两个 router-view 通过 route 信息和 keep-alive 控制页面是否缓存,这样存在两个问题:
keep-alive 对相同的页面只会存储一次,不会有两个版本的相同页面 两个 router-view 之间没有办法使用 transition 等动画
曾经在查看 cube-ui 的例子的时候,发现他们的例子好像解决了页面缓存的问题,我借鉴(copy)了他们的处理方式,升级了一下,使用 CSS 和嵌套 route 的方式实现了基本的需求。 但是也有缺点:
我必须严格按照页面的层级来写我的 route 很多页面在多个地方需要用到,我必须都得把路由配上(例如商品详情页面,会在很多个地方有入口)
最后憋出个下面的轮子
English | 简体中文
Vue 单页应用导航管理器,像原生 app 一样管理页面栈而不是销毁。
push
或者forward
的时候重新渲染页面,Stack 中会添加新渲染的页面back
或者go(负数)
的时候不会重新渲染,从 Stack 中读取先前的页面,会保留好先前的内容状态,例如表单内容,滚动条滑动的位置等back
或者go(负数)
的时候会把不用的页面从 Stack 中移除replace
会更新 Stack 中当前页面npm install vue-page-stack
# OR
yarn add vue-page-stack
import Vue from 'vue'
import VuePageStack from 'vue-page-stack';
// vue-router is necessary
Vue.use(VuePageStack, { router });
// App.vue
<template>
<div id="app">
<vue-page-stack>
<router-view ></router-view>
</vue-page-stack>
</div>
</template>
<script src="https://unpkg.com/vue-page-stack/dist/vue-page-stack.js"></script>
Vue.use(VuePageStack.default, { router });
注册的时候可以指定 VuePageStack 的名字和 keyName
use Vue.use
to install vue-page-stack
使用之前需要注册插件
Vue.use(VuePageStack, options);
// example
Vue.use(VuePageStack, { router });
Options 说明:
Attribute | Description | Type | Accepted Values | Default ---|---|---|---|--- router | vue-router instance | Object | vue-router instance | - name | VuePageStack name | String | 'VuePageStack' | 'VuePageStack' keyName | stack-key name | String | 'stack-key' | 'stack-key'
注册的时候可以指定 VuePageStack 的名字和 keyName
Vue.use(VuePageStack, { router, name: 'VuePageStack', keyName: 'stack-key' });
如果想在页面前进或者后退的时候添加一些动画,可以通过stack-key-dir
进行判断
// App.vue
$route(to, from) {
if (to.params['stack-key-dir'] === 'forward') {
this.transitionName = 'forward';
} else {
this.transitionName = 'back';
}
}
为什么会给路由添加keyName
这个参数,是为了支持浏览器的后退,前进事件,这个特性在 webApp,微信公众号和小程序很重要
获取当前页面实例部分参考了Vue
源码中keep-alive
的部分
这个插件同时借鉴了vue-navigation和vue-nav,很感谢他们给的灵感。
1
hezhongfeng OP 更新到最新版,适配最新的 vue-router
|