VuePageStack 使用教程

VuePageStack 使用教程

1. 项目介绍

VuePageStack 是一个为 Vue3.0 单页应用（SPA）设计的导航管理器。它能够像原生应用一样缓存 SPA 中的 UI，而不是销毁它们。VuePageStack 基于 vue-router 进行扩展，保留了原始的导航逻辑，同时提供了页面栈管理功能，使得页面状态（如表单内容、滚动条位置等）可以在导航过程中得以保留。

2. 项目快速启动

安装

首先，确保你已经安装了 Node.js 和 npm。然后，使用以下命令安装 VuePageStack：

pnpm install vue-page-stack

使用

在你的 Vue 应用中引入 VuePageStack 插件，并在创建应用时使用它。以下是一个简单的例子：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { VuePageStackPlugin } from 'vue-page-stack'
import router from './router' // 确保你已经设置了 vue-router

const app = createApp(App)

// 使用 VuePageStack 插件
app.use(VuePageStackPlugin, { router })

app.mount('#app')

在你的组件中，你可以使用 <vue-page-stack> 标签包裹 <router-view> 来启用页面缓存功能：

<template>
  <vue-page-stack @back="onBack" @forward="onForward">
    <router-view :key="$route.fullPath"></router-view>
  </vue-page-stack>
</template>

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

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

确保给 <router-view> 设置了 :key="$route.fullPath"，这样每次路由变化时，组件都会更新其 key，从而触发页面栈的更新。

3. 应用案例和最佳实践

案例一：页面缓存

使用 VuePageStack，当用户导航到新页面时，当前页面会被缓存而不是销毁。当用户点击后退按钮返回之前页面时，页面会从缓存中恢复，而不是重新渲染。

<vue-page-stack>
  <router-view :key="$route.fullPath"></router-view>
</vue-page-stack>

最佳实践

• 对于需要频繁切换且状态需要保持的页面，使用 VuePageStack 可以提高用户体验。
• 避免在页面栈中保留过多不活跃的页面，以减少内存占用。

4. 典型生态项目

VuePageStack 可以与以下生态项目配合使用，以实现更丰富的功能：

• Vue Router：用于页面路由管理。
• Vuex：用于状态管理。
• Vite：作为构建工具，提高开发效率。

通过整合这些工具，开发者可以创建性能优良、用户体验良好的单页应用程序。