Vue页面堆栈管理器详情

 更新时间:2021年10月23日 10:31:45   作者:hezhongfeng  
这篇文章主要介绍了Vue页面堆栈管理器

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

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

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

预览

1、需求分析

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

场景举例:

  • 列表页进入详情页,然后回退
  • 某操作页A需要在下一页面B选择,选择后需要退回到A页面(A页面还要知道选择了什么)
  • 在任意页面进入到登录页面,登录或者注册成功后返回到原页面,并且要保证继续回退是不会到登陆页面的
  • 支持浏览器的backforward(微信或者小程序很有用)
  • 在进入、退出或者某些特殊页面的时候添加一些动画,比如模仿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
# 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>

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-navigationvue-nav,很感谢他们给的灵感。

到此这篇关于Vue页面堆栈管理器详情的文章就介绍到这了,更多相关Vue页面堆栈管理器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 关于引入vue.js 文件的知识点总结

    关于引入vue.js 文件的知识点总结

    在本篇文章里小编给大家分享的是关于引入vue.js 文件的知识点总结,有需要的朋友们可以参考学习下。
    2020-01-01
  • Vue登录功能实现

    Vue登录功能实现

    本文主要介绍了 Vue 登录功能实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 基于vue实现微博三方登录流程解析

    基于vue实现微博三方登录流程解析

    这篇文章主要介绍了基于vue实现微博三方登录流程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-11-11
  • 详解VUE响应式原理

    详解VUE响应式原理

    这篇文章主要为大家介绍了vue组件通信的几种方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • vue.js获得当前元素的文字信息方法

    vue.js获得当前元素的文字信息方法

    下面小编就为大家分享一篇vue.js获得当前元素的文字信息方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue中关闭eslint的方法分析

    vue中关闭eslint的方法分析

    这篇文章给大家讲述了vue中关闭eslint的方法内容,有需要的读者们可以参考学习下。
    2018-08-08
  • vue通过v-html指令渲染的富文本无法修改样式的解决方案

    vue通过v-html指令渲染的富文本无法修改样式的解决方案

    这篇文章主要介绍了vue通过v-html指令渲染的富文本无法修改样式的解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • 一份超级详细的Vue-cli3.0使用教程【推荐】

    一份超级详细的Vue-cli3.0使用教程【推荐】

    这篇文章主要介绍了一份超级详细的Vue-cli3.0使用教程,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • vue使用引用库中的方法附源码

    vue使用引用库中的方法附源码

    当vue使用库中的getvalue方法时,需要调用相关方法,通过定义ref=“”,使用this.$refs.exampleEditor._setValue(''),具体示例代码参考下本文,对vue使用引用库中的方法,感兴趣的朋友一起看看吧
    2021-07-07
  • vue修改滚动条样式的方法

    vue修改滚动条样式的方法

    这篇文章主要介绍了vue修改滚动条样式,首先要知道,修改滚动条样式,利用伪元素-webkit-scrollbar。下面来看看文章内容的具体实现吧
    2021-11-11

最新评论