Vue-page-stack

Vue3 — это одностраничное приложение для навигации, которое управляет стеком страниц, а не уничтожает их.

Пример

Предварительный просмотр: http://vue-page-stack-example.vercel.app/

Исходный код примера: https://github.com/hezhongfeng/vue-page-stack-example

Особенности

— Расширение на vue-router, без изменения существующей логики навигации. — При использовании push или forward страница повторно отображается, и в стеке сохраняется новая отображаемая страница. — Когда используется back или go (отрицательное число), предыдущая страница не перерисовывается, а берётся из стека. Эти страницы сохраняют предыдущее состояние содержимого, такое как содержимое формы или положение полосы прокрутки. — back или go удаляют неиспользуемые страницы из стека. — replace обновляет текущую страницу в стеке. — при возврате к предыдущей странице активируется функция hook. — поддержка событий браузера назад и вперёд. — предоставляет информацию об изменении направления навигации и позволяет добавлять различные анимации при переходе вперёд и назад.

Отличия от KeepAlive

— VuePageStack не предоставляет параметры include, exclude и max, поскольку он предназначен для полного управления стеком страниц. — 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

Перед использованием необходимо зарегистрировать плагин.

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

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

Опции:

Если вы хотите добавить события при переходе вперёд или назад, вы можете обработать их с помощью событий компонента back и forward.

// 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>