亲宝软件园·资讯

展开

Vue页面堆栈管理器 Vue页面堆栈管理器详情

hezhongfeng 人气:1
想了解Vue页面堆栈管理器详情的相关内容吗,hezhongfeng在本文为您仔细讲解Vue页面堆栈管理器的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Vue页面堆栈管理器,Vue页面堆栈,下面大家一起来学习吧。

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

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

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

预览

1、需求分析

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

场景举例:

2、尝试过的方法

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

2.1 keep-alive

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

2.2 CSS配合嵌套route

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

但是也有缺点:

3、功能说明

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

加载全部内容

相关教程
猜你喜欢
用户评论