Vue-page-stack

v3.2.0

1. Исправлена ошибка router.go.

v3.1.4

1. Исправлена ошибка обновления браузера и последующего возврата назад.

v3.1.3

1. Устранена проблема кэширования страниц при использовании replace.

v3.1.2

1. Удален параметр stack-key из URL.
2. Из-за специальной обработки встроенных компонентов в Vue3.x в настоящее время невозможно использовать его вместе с Transition.

Это версия Vue3.0, для Vue2.0 нажмите эту ссылку

Английский | 简体中文

Vue3 SPA менеджер навигации, кэширует пользовательский интерфейс в SPA как нативное приложение, а не уничтожает его.

Пример

preview

демо-код

Особенности

• 🐉 Расширение vue-router, исходная логика навигации остаётся прежней
• ⚽ push или forward отображает страницу, и вновь отображённая страница сохраняется в стеке
• 🏆 back или go(отрицательное значение): когда предыдущие страницы не перерисовываются, но считываются из стека, эти страницы сохраняют предыдущее состояние содержимого, такое как содержимое формы, положение прокрутки полосы прокрутки и т. д.
• 🏈 back или go(отрицательное значение) удаляет неиспользуемые страницы из стека
• 🎓 replace обновит текущую страницу в стеке
• 🎉 Активированная функция хука срабатывает при возврате к предыдущей странице
• 🚀 Поддержка событий обратного и прямого перехода браузера
• 🐰 Предоставляет изменения направления маршрутизации и может добавлять различные анимации при переходе вперёд и назад

Разница между VuePageStack и KeepAlive

• 🌱 VuePageStack не предоставляет параметры include, exclude и max, потому что VuePageStack хочет добиться полного управления стеком страниц, только по порядку входа и выхода
• 🪁 KeepAlive будет продолжать кэшировать страницу после её кэширования, а VuePageStack поможет уничтожить лишние страницы на основе иерархии стека страниц
• 🧬 KeepAlive заходит (не возвращается) на ту же страницу маршрута и продолжает повторно использовать ранее кэшированную страницу, в то время как VuePageStack перерисовывает страницу

Установка и использование

Установка

pnpm install vue-page-stack

Использование

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

Используйте Vue.use для установки vue-page-stack

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

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

Описание опций:

forward or back

Если вы хотите сделать анимацию входа или выхода, vue-page-stack предлагает stack-key-dir, чтобы определить направление вперёд или назад.

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

example

Notes

Changelog

Подробности изменений для каждого выпуска документированы в release notes.

Principle

Получение текущего экземпляра страницы относится к разделу keep-alive в Vue.

Thanks

Плагин опирается на vue-navigation и vue-nav, большое спасибо за их вдохновение.

Contributors ✨

Спасибо этим замечательным людям (emoji key):

hezf 🎨

李娜 📖

余小磊 💻

yellowbeee 💻