hezhongfeng/vue-page-stack

Routing and navigation for your Vue SPA. Vue3.0 单页应用导航管理器

vue-page-stack

v3.1.0

1. 移除了 url 上的参数 stack-key
2. 因为 Vue3.x 对内置组件有特殊处理，所以目前不能和 Transition 一起使用

This is the version of Vue3.0, Vue2.0 please click this link

English | 简体中文

---

A Vue3 SPA navigation manager,cache the UI in the SPA like a native application, rather than destroy it.

Example

preview

demo code

Features

• 🐉 Extend on vue-router, original navigation logic remains the same
• ⚽ push or forward renders the page and the newly rendered page is stored in Stack
• 🏆 back or go(negative) when the previous pages are not re-rendered, but read from the Stack, and these pages retain the previous content state, such as form content, scrollbar scroll position, etc.
• 🏈 back or go(negative) removes the unused pages from the Stack
• 🎓replace will update the current page in the Stack
• 🎉 The activated hook function is triggered when going back to the previous page
• 🚀 Support for browser backward and forward events
• 🐰 Provides routing direction changes and can add different animations when going forward and backward

The difference between VuePageStack and KeepAlive

• 🌱 VuePageStack does not provide include, exclude and max parameters, because VuePageStack wants to achieve a complete page stack management, only in order in and out
• 🪁 KeepAlive will keep caching the page after it has been cached, and VuePageStack will help destroy the extra pages based on the page stack hierarchy
• 🧬 KeepAlive enters (not returns) the same route page and continues to reuse the previously cached page, while VuePageStack re-renders the page

Installation and use

Installation

pnpm install vue-page-stack

use

import { createApp } from 'vue';
import { VuePageStackPlugin } from 'vue-page-stack';

const app = createApp(App);

// router is necessary
app.use(VuePageStackPlugin, { router });

// App.vue
<template>
  <router-view v-slot="{ Component }">
    <vue-page-stack @back="onBack" @forward="onForward">
      <component :is="Component" :key="$route.fullPath"></component>
    </vue-page-stack>
  </router-view>
</template>

<script setup>
const onBack = () => {
  console.log('back');
};

const onForward = () => {
  console.log('forward');
};
</script>

API

install

use Vue.use to install vue-page-stack

import { VuePageStackPlugin } from 'vue-page-stack';

//...
app.use(VuePageStackPlugin, { router });

Options description：

Attribute	Description	Type	Accepted Values	Default
router	vue-router instance	Object	vue-router instance	-
name	VuePageStack name	String	'VuePageStack'	'VuePageStack'

forward or back

If you want to make some animate entering or leaving, vue-page-stack offers stack-key-dir to judge forward or backward.

// App.vue
<vue-page-stack @back="onBack" @forward="onForward">
  <component :is="Component" :key="$route.fullPath"></component>
</vue-page-stack>

example

Notes

Changelog

Details changes for each release are documented in the release notes.

Principle

Getting the current page instance refers to the keep-alive section of Vue.

Thanks

The plug-in draws on both vue-navigation and vue-nav，Thank you very much for their inspiration.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

hezf 🎨

李娜 📖

余小磊 💻

yellowbeee 💻

vue-page-stack's Issues

首页tab切换问题

首页有多个tab，来回切换时，tab页每次都是新的
路由：

{
name: "foot",
path: "/foot",
meta: { title: "底部导航" },
component: () => import("@/views/main/foot.vue"),
children: [
{
name: "home",
path: "/home",
meta: { title: "首页" },
component: () => import("@/views/main/home.vue")
},
{
name: "projectInfo",
path: "/projectInfo",
meta: { title: "项目信息" },
component: () => import("@/views/main/projectInfo.vue")
},
{
name: "workPlan",
path: "/workPlan",
meta: { title: "工作计划" },
component: () => import("@/views/main/workPlan.vue")
},
{
name: "task",
path: "/task",
meta: { title: "员工任务" },
component: () => import("@/views/main/task.vue")
},
{
name: "personal",
path: "/personal",
meta: { title: "我的" },
component: () => import("@/views/main/personal.vue")
}
]
}

页面：

<router-view />
<van-tabbar v-model="active">
  <van-tabbar-item to="/projectInfo">
    <span>项目信息</span>
  </van-tabbar-item>
  <van-tabbar-item to="/workPlan">
    <span>工作计划</span>
  </van-tabbar-item>
  <van-tabbar-item to="/home">
    <span>首页</span>
  </van-tabbar-item>
  <van-tabbar-item to="/task">
    <span>员工任务</span>
  </van-tabbar-item>
  <van-tabbar-item to="/personal">
    <span>我的</span>
  </van-tabbar-item>
</van-tabbar>

如果router-view 用vue-page-stack 包起来就什么都不显示了，白屏

Throw an error Uncaught (in promise) undefined.

Throw an error Uncaught (in promise) undefined.
version: [email protected] + [email protected] + [email protected]

vue-page-stack：Clear all page cache

Hello, can you provide a method to clear all the router cache.
Because I want to router back to root page (the home page) but It existed the cached page stacks that I unwated.
So，this methods is usefully.

eg: this.$pageStack.cleanRoutes();

Cannot read property 'catch' of undefined

引入vue-page-stack 如题主所示引入，报上述错误
$router.push 到文章页报错

路由跳转catch显示undefined

报错信息

TypeError: Cannot read property 'catch' of undefined
    at _t.router.push (vue-page-stack.common.js:1619)

报错位置

return routerPush(location).catch(function (error) {
      if (error !== undefined) {
        console.log(error);
      }});

dist下js文件中还有 const 语法

this.$pageStack.getStack() 栈里的信息为什么不包含路由信息，比如路由的name

这个栈里信息基本都没有返回路由的信息，那这样 这个栈的用处是什么呢

如何在A页面打开A页面

测试A->B->A是可以的，A->A用push方法没有效果，麻烦问一下有支持的方法吗

跳转时报错

您好，很感谢开源这么好用的库，不过在使用过程中，路由跳转（调用 this.$router.push）引起了报错，如下图所示，另外在运行您提供的 demo vue-page-stack-example 时也会报同样的错误：

项目地址
https://github.com/mcuking/mobile-web-best-practice

demo 地址
https://mcuking.github.io/mobile-web-best-practice/

跳转时，没有传入path，只想改变路由的query参数，报错。

看了报错，发现path必须， 有什么方法可以捕捉或者优化吗？

this.$router.go(-1) 这个还在原页面不动，虽然地址栏变化了，然后导致所有的路由都失效了，卡死在当前页面

this.$router.go(-1) 这个还在原页面不动，虽然地址栏变化了，然后导致所有的路由都失效了，卡死在当前页面

"vue-router": "^3.3.4"

带动画转场的,返回滚动条无法定位

带动画的话,返回后位置无法定位到之前的地方,都是在最上面,如果去掉transition的话是可以记住位置的

按照demo使用后为什么滚动条位置不会被缓存

通过dev-tools查看后发现组件的确被缓存了，但使用this.router.back()返回后之前的滚动条位置丢失

刷新后缓存丢失的问题

develop开发时，热更新白屏

develop开发时，热更新白屏

App.vue使用动画，整个页面导航也会伴随动画。

在子组件Home 中， 子组件（底部导航），整个页面都会有动画。
请问怎么解决？

可以给某些页面选择不配置stack-key吗

遇到公众号ios分享的问题，从页面Alocation.href跳转了页面B，但是页面B带了stack-key，导致签名不成功。用户可以自主选择给页面B不配置stack-key吗？

hash

如果使用hash模式的路由，是无法相同路由继续 跳转的吗？

stack-key

stack-key希望后续可以从url中隐藏

页面跳转stack-key的值没变, 难道是因为/test/a和/test/b的路由没有层级关系？

我在官方示例的基础上做如下改动:

1、router\index.js添加新路由

{
    path: '/test',
    component: BlankLayout,
    redirect: '/test/a',
    children: [
      {
        path: 'a',
        component: () => import('@/views/test/a.vue')
      },
      {
        path: 'b',
        component: () => import('@/views/test/b.vue')
      }
    ]
  },

其中BlackLayout.vue是一个空布局页面，代码如下：

<template>
    <router-view />
</template>

<script>

  export default {
    name: "BlankLayout",
  }
</script>

<style scoped>

</style>

2、创建对应的2个页面

/views/test/a.vue 页面：

<template>
    <div>
      <button @click="toB">进入/test/b页面</button>
    </div>
</template>

<script>
    export default {
      name: 'APage',
      created(){
        console.log("/test/a created")
      },
      beforeDestroy(){
        console.log("/test/a beforeDestroy")
      },
      methods: {
          toB(){
            this.$router.push('/test/b')
          }
      }
    }
</script>

<style scoped>

</style>

/views/test/b.vue页面：

<template>
    <div>
      <button @click="toHelloA">进入/hello/a页面</button>
    </div>
</template>

<script>
    export default {
      name: 'BPage',
      created(){
        console.log("/test/b created")
      },
      beforeDestroy(){
        console.log("/test/b beforeDestroy")
      },
      methods: {
        toHelloA(){
            this.$router.push('/hello/a')
          }
      }
    }
</script>

<style scoped>

</style>

3、修改首页的index/index.vue页面

onExperience() {
      this.$router.push('/test/a');
    },

4、测试发现从/test/a页面进入/test/b页面时，路由参数stack-key未变，a.vue页面的beforeDestory()方法被调用了，导致页面被销毁了

猜测：难道是因为/test/a和/test/b的路由没有层级关系？

beforeRouteLeave 调用了两次

push的话beforeRouteLeave调用了两次，back的话只会一次。

pc网页能用吗

pc网页能用吗

能否强制缓存某个页面？

使用场景: 移动端底部 tab 导航

底部 tab 导航不管是 push 或者是 replace 操作, 页面都应该被缓存下来

可以隐藏地址栏的stack-key吗

我们是直播业务，地址类似下面这样
http://localhost:8080/#/livePlay/886688?stack-key=428bfa92
我想隐藏?stack-key=428bfa92这一段，因为用户可以将这个地址分享出去，但是stack-key参数很奇怪

$router.go(-1)，可以通知上级页面重新渲染吗？

举例：确认订单页>选择收货地址>执行$router.go(-1)返回到确认订单页
此时希望确认订单页能重新渲染，又不记录选择收货地址的历史记录

是不是只支持一级路由

含有嵌套路由报错

关于cube-scroll的问题

如果不使用cube-scroll这个组件，是不是就无法保持记录滚动，我看之前issues有提到这个问题，但是看得不太明白。

如何清空View栈

我现在有个需求：
登录后在使用过程中某个时间点，这个账号被顶了。
那么我需要回到登录页面。
这个时候我想把所有的页面清除，然后再把登录页push出来
请问怎么做呢？
另外，

let UIStack = this.$pageStack.getStack();

我拿不到pageStack

TypeError: Cannot read property 'catch' of undefined at VueRouter.router.push (vue-page-stack.common.js:1619)

TypeError: Cannot read property 'catch' of undefined
at VueRouter.router.push (vue-page-stack.common.js:1619)

请问同级页面跳转如何处理动画？

目前跳转时params里总会带有forward或者back，可是同级页面跳转我想要直接切换而非带上前进动画或者后退动画，请问如何实现呢？

路由切换有BUG

没办法截图。来回切换home与关于，两页面内容会重叠。

是否缓存页面路由可配置

有些页面不需要缓存，为了少占用内存

1.能否关闭指定的页面？2.能否关闭所有页面，打开到应用内的某个页面？

1.能否关闭指定的页面？2.能否关闭所有页面，打开到应用内的某个页面？

有打算支持vue 3吗？

现在的版本vue 3 beta无法使用，有打算适配吗？

新示例，新功能 clearPush/backReplace，新方法 setStack/clearStack

https://gitee.com/hezf/vue-page-stack/pulls/1

添加过度动画以后返回页面 滚动距离没有缓存

添加过度动画以后返回页面 滚动距离没有缓存 有什么好的办法吗

使用插件，有办法做到选项卡页面跳转达到缓存的效果吗？

纠正文档错误

1. 二级标题_Vue 单页应用导航管理器_中英文不对应，建议
   中文：Vue 单页应用导航管理器，像原生app一样管理页面栈而不是销毁
英文：A Vue SPA navigation manager,cache the UI in the SPA like a native application, rather than destroy it

2. 示例源码 英文：demo code

3. 功能特性 第二条 英文：When a page is re-rendered as a push or forward, a newly rendered page will be added to the Stack

CDN引入vue和vue-router引起错误

cdn引入的vue和vue-router,此时import 'vue-page-stack'会导致报错Cannot read property 'router' of undefined
是不是src/index.js中58-60行引起的?这里没有router实例

控制台报这个错

Error in render: "TypeError: Cannot read property 'vnode' of undefined"

BOT

@all-contributors please add @hezhongfeng for design

项目中使用了keepalive是否同时使用这个

按文档使用时，报uncought TypeError: Cannot read property '_leaveCb' of undefined

路由嵌套的问题

用了这个插件，发现在路由嵌套的时候是有问题的，包裹在第二层的 router-view ，这一层路由的视图跳转的时候没办法显示。

每次将tab切回来都会重新创建一个页面

我的主页面下面有四个tab，每次点击tab按钮都是通过this.$router.push(/xxx);进行页面跳转。
用了这个组件之后每次切换前一个页面都不会destroy，但是每次切回来这个页面又会重新create一遍，来回切换会生成很多无用的页面。
帮我看看是我用错了还是组件有问题？

使用插件，有办法做到选项卡页面跳转达到缓存的效果吗？

场景：A页面跳转B页面，B页面跳转C页面，这时候路由记录有三个。我再使用push跳转至B页面，这时候我携带路由记录B页面的key值，从缓存中获取打开的B页面，但是路由记录中的C却释放了，导致我跳转C页面是重新加载。有办法解决这一问题吗？还是说我写的方式有问题。

滚动位置缓存问题

请问滚动位置缓存是必须依赖 cube-scroll 吗?

https://github.com/hezhongfeng/vue-page-stack-example/blob/master/src/views/main/MainList.vue

把以上文件中的 cube-scroll 换成普通滚动，返回时就无法记住滚动位置了。

<template>
  <div class="main-list">
    <stack-header :title="$t('home')"></stack-header>
    <!-- <cube-scroll ref="scroll0" :data="list"> -->
    <div style="height: 500px; overflow-y: scroll">
      <main-item v-for="(item, index) in list" :key="index" :item="item" :index="index" @click="onClick(item)"></main-item>
    </div>
    <!-- </cube-scroll> -->
  </div>
</template>

npm安装后无法使用

按照说明配置以后，无法使用

每进一个路由导航触发了两次

router.beforeEach(async (to, from, next) => { //这里触发了两次 })

自定义stack-key-dir

可以增加支持外部传入stack-key-dir来控制动画吗，
我现在index.js中修改的，

报错 Cannot read property 'catch' of undefined

按照示例集成到自己的项目中，工程跑起来后，只要this.$router.push({ name: 'home-page' }) 就会报 Cannot read property 'catch' of undefined