美文网首页
Vue 单页应用导航管理器

Vue 单页应用导航管理器

作者: hezf | 来源:发表于2019-12-04 16:16 被阅读0次

Vue 单页应用导航管理器,像原生app一样管理页面栈而不是销毁。

image

项目地址

预览

示例源码

首先讲下为什么要完成这个插件

需求分析

由于重度使用了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. 很多页面在多个地方需要用到,我必须都得把路由配上(例如商品详情页面,会在很多个地方有入口)

下面说下vue-page-stack实现的功能特性

功能特性

  • 🐉在vue-router上扩展,原有导航逻辑不变
  • push或者forward的时候重新渲染页面,Stack中会添加新渲染的页面
  • 🏆back或者go(负数)的时候先前的页面不会重新渲染,而是从Stack中读取,并且这些页面保留着先前的内容状态,例如表单内容,滚动条滑动的位置等
  • 🏈back或者go(负数)的时候会把不用的页面从Stack中移除
  • 🎓replace会更新Stack中当前页面
  • 🎉回退到之前页面的时候有activated钩子函数触发
  • 🚀支持浏览器的后退,前进事件
  • 🐰提供路由方向的变化,并且可以在前进和后退的时候添加不同的动画

在npm上已经迭代了很多个版本,除了我们内部项目已经开始正式使用外,也有很多人开始使用,并且参与了项目的改进。欢迎使用,欢迎Star,希望能帮到你。

安装和用法

安装

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>

CDN

<script src="https://unpkg.com/vue-page-stack/dist/vue-page-stack.js"></script>
Vue.use(VuePageStack.default, { router });

API

注册插件

注册的时候可以指定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';
  }
}

example

相关说明

keyName

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

原理

获取当前页面实例部分参考了Vue源码中keep-alive的部分

感谢

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

相关文章

  • Vue 单页应用导航管理器

    Vue 单页应用导航管理器,像原生app一样管理页面栈而不是销毁。 项目地址 预览 示例源码 首先讲下为什么要完成...

  • Vue多组件+Element导航

    单页应用 新建侧边导航Aside.vue文件。导航使用的Element UI框架。 路由 src/router/i...

  • Vue-router配置子路由

    路由就是SPA(单页应用)的路径管理器。vue-router就是WebApp的链接路径管理系统。 安装vue-ro...

  • 简单实现vue-router

    vue-router 将路由引入到前端让构建单页应用变得简单,vue-router作为Vue的路由管理器,使我们在...

  • Vue-Router学习总结

    什么是路由? vue-router这里的路由就是SPA(单页应用)的路径管理器。通俗的说,vue-router就是...

  • vue-router

    1.vue-router是什么? 简单点来说,vue-router就是SPA(单页应用)的路径管理器。路由模块的本...

  • cnode社区

    面试要点:(单页应用重点在vue-router) 单页应用,页面只有一个 APP组件; vue-router实现页...

  • 前端路由与Vue Router

    Vue Router 是Vue.js的官方插件,用来快速实现单页应用 单页应用 SPA(Single Page A...

  • Vue 单页应用(spa)前端路由实现原理

    一文搞懂单页应用原理Vue项目History模式路由机制 源码分析VueVueRouter Vue 单页应用(sp...

  • vue多页应用

    vue如何将单页面改造成多页面应用 vue单页多页的开发环境配置+vue的开发思路

网友评论

      本文标题:Vue 单页应用导航管理器

      本文链接:https://www.haomeiwen.com/subject/jhslgctx.html