1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/hezf-vue-page-stack

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
README.zh-cn.md 4.4 КБ
Копировать Редактировать Web IDE Исходные данные Просмотреть построчно История
gitlife-traslator Отправлено 28.11.2024 02:12 ada71e9

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 });

Опции:

Атрибут Описание Тип Допустимые значения По умолчанию
router экземпляр vue-router объект экземпляр vue-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>

Опубликовать ( 0 )

Вы можете оставить комментарий после Вход в систему

1
https://api.gitlife.ru/oschina-mirror/hezf-vue-page-stack.git
git@api.gitlife.ru:oschina-mirror/hezf-vue-page-stack.git
oschina-mirror
hezf-vue-page-stack
hezf-vue-page-stack
master