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. — поддержка событий браузера назад и вперёд. — предоставляет информацию об изменении направления навигации и позволяет добавлять различные анимации при переходе вперёд и назад.
— 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>
Перед использованием необходимо зарегистрировать плагин.
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 )