[vue-page-stack]Vue页面堆栈管理器

Vue页面堆栈管理器

A vue page stack manager Vue页面堆栈管理器 vue-page-stack

image

示例展示了一般的前进、后退(有activited)和replace的场景,同时还展示了同一个路由可以存在多层的效果(输入必要信息)

目前版本还没有经过整体业务的测试,欢迎有同样需求的进行试用

预览

示例源码

需求分析

由于重度使用了Vue全家桶在web App、公众号和原生Hybrid开发,所以很自然的会遇到页面跳转与回退这方面的问题。

场景举例:

  1. 列表页进入详情页,然后回退
  2. 某操作页A需要在下一页面B选择,选择后需要退回到A页面(A页面还要知道选择了什么)
  3. 在任意页面进入到登录页面,登录或者注册成功后返回到原页面,并且要保证继续回退是不会到登陆页面的
  4. 支持浏览器的backforward(微信或者小程序很有用)
  5. 在进入、退出或者某些特殊页面的时候添加一些动画,比如模仿ios的默认动画(进入是页面从右向左平移,退出是页面从左向右平移)

尝试过的方法

尝试了以下方法,但是都没有达到我的预期

keep-alive

一般是使用两个router-view通过route信息和keep-alive控制页面是否缓存,这样存在两个问题:

  1. keep-alive对相同的页面只会存储一次,不会有两个版本的相同页面
  2. 两个router-view之间没有办法使用transition等动画

CSS配合嵌套route

曾经在查看cube-ui的例子的时候,发现他们的例子好像解决了页面缓存的问题,我借鉴(copy)了他们的处理方式,升级了一下,使用CSS和嵌套route的方式实现了基本的需求。
但是也有缺点:

  1. 我必须严格按照页面的层级来写我的route
  2. 很多页面在多个地方需要用到,我必须都得把路由配上(例如商品详情页面,会在很多个地方有入口)

功能说明

  1. 在vue-router上扩展,原有导航逻辑不需改变
  2. push或者forward的时候重新渲染页面,Stack中会添加新渲染的页面
  3. back或者go(负数)的时候不会重新渲染,从Stack中读取先前的页面,会保留好先前的内容状态,例如表单内容,滚动条滑动的位置等
  4. back或者go(负数)的时候会把不用的页面从Stack中移除
  5. replace会更新Stack中页面信息
  6. 回退到之前页面的时候有activited钩子函数触发
  7. 支持浏览器的后退,前进事件
  8. 支持响应路由参数的变化,例如从 /user/foo 导航到 /user/bar,组件实例会被复用
  9. 可以在前进和后退的时候添加不同的动画,也可以在特殊页面添加特殊的动画

安装和用法

安装

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>

API

注册

注册的时候可以指定VuePageStack的名字和keyName,一般不需要

Vue.use(VuePageStack, { router, name: 'VuePageStack', keyName: 'stack-key' });

前进和后退

想在前进、后退或者特殊路由添加一些动画,可以在router-view的页面通过watch $route,通过stack-key-dir(自定义keyName这里也随之变化)参数判断此时的方向,可以参考实例

相关说明

keyName

为什么会给路由添加keyName这个参数,是为了支持浏览器的后退,前进事件,这个特点在微信公众号和小程序很重要

原理

获取当前页面Stack部分参考了keep-alive的部分

结束语

念念不忘,必有回响

这个插件存在我心中很久了,断断续续做了好久,终于被我搞定了,真的非常开心。

目前版本还没有经过整体业务的测试,欢迎有同样需求的进行试用,有任何的意见或者建议,欢迎在 Github 提issue和PR,感谢你的支持和贡献。

这个插件同时借鉴了vue-navigationvue-nav,很感谢他们给的灵感。

coder

256 声望
450 粉丝
0 条评论
推荐阅读
实现网易新闻的图中图(PIP)《二零一七年娱乐圈画传》
netease-news实现网易新闻的图中图(PIP)《二零一七年娱乐圈画传》查看源码点击或者扫码预览:绘画过程分析上面的动图,如何实现?直观上感觉像是一个大图,但仔细想想肯定不对,那得多大的图~看了下网页结构,用...

hezhongfeng阅读 107

封面图
Vue中的diff算法
diff算法是一种通过同层的树节点进行比较的高效算法,避免了对树进行逐层搜索遍历,所以时间复杂度只有 O(n)。diff算法的在很多场景下都有应用,例如在 vue 虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较更新时...

款冬27阅读 14.2k评论 7

【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5k评论 10

封面图
vue-property-decorator使用手册
@Component 装饰器可以接收一个对象作为参数,可以在对象中声明 components ,filters,directives等未提供装饰器的选项,也可以声明computed,watch等

似曾相识17阅读 29.6k评论 7

前端开发工具
前端教程阿西河前端教程丨一个助你成为全栈开发的网站前端高手进阶JavaScript利用js实现表单的校验KeyCode 查询表现代 JavaScript 教程时间戳(Unix timestamp)转换工具HTML minifierJavaScript代码压缩-js代码压...

寒青14阅读 2.6k

万字长文~vue+express+mysql带你彻底搞懂项目中的权限控制(附所有源码)
所谓的权限,其实指的就是:用户是否能看到,以及是否允许其对数据进行增删改查的操作,因为现在开发项目的主流方式是前后端分离,所以整个项目的权限是后端权限控制搭配前端权限控制共同实现的

水冗水孚11阅读 1.5k

[译]Vue.js + Astro 比 Vue SPA 更好吗?
在本文中,我将向您展示如何使用 Astro 构建基于 Vue 的应用程序,我们将了解其独特的架构如何带来比单页应用程序 (SPA) 更好的性能。

杭州程序员张张7阅读 4.1k评论 3

coder

256 声望
450 粉丝
宣传栏