[vue-page-stack] Менеджер стека страниц Vue

внешний интерфейс Vue.js
[vue-page-stack] Менеджер стека страниц Vue

Менеджер стека страниц Vue

Менеджер стека страниц Vue Менеджер стека страниц Vuevue-page-stack

В примере показаны общие сценарии прямого, обратного (с активированным) и замены, а также показано, что один и тот же маршрут может иметь несколько эффектов (введите необходимую информацию)

Текущая версия не была протестирована в целом бизнесом, вы можете попробовать ее с теми же требованиями.

предварительный просмотр

исходный код

анализ спроса

Из-за интенсивного использования корзины семейства Vueweb App, официальный аккаунт и нативная гибридная разработка, поэтому вполне естественно столкнуться с проблемами со скачками страниц и откатами.

Пример сценария:

  1. Страница списка переходит на страницу сведений, а затем возвращается
  2. На следующей странице B необходимо выбрать рабочую страницу A, после выбора вернуться на страницу A (страница также должна знать, что выбрать)
  3. Перейти на страницу входа на любой странице, вернуться на исходную страницу после входа или регистрации и убедиться, что продолжение отката не переходит на целевую страницу.
  4. с поддержкой браузераbackа такжеforward(Полезны программы WeChat или Mini)
  5. Добавьте анимацию при входе, выходе или некоторых специальных страницах, например, имитирующую стандартную анимацию ios (вход — это пролистывание страницы справа налево, выход — прокрутка страницы слева направо)

проверенные методы

Пробовал следующее, но ни один из них не сделал то, что я ожидал

keep-alive

Обычно дваrouter-viewЕсть две проблемы с информацией о маршруте и страницей управления Keep-Alive.

  1. keep-alive будет хранить одну и ту же страницу только один раз, двух версий одной и той же страницы не будет.
  2. Невозможно использовать между двумя маршрутизаторамиtransitionи т.д. анимация

CSS с вложенными маршрутами

просматривалcube-uiКогда я использовал этот пример, я обнаружил, что их пример, похоже, решает проблему кэширования страниц.Я позаимствовал (скопировал) их метод обработки, обновил его и использовал CSS и вложенные маршруты для достижения основных нужд. Но есть и недостатки:

  1. Я должен писать свои маршруты строго в соответствии с иерархией страниц
  2. Многие страницы должны использоваться в нескольких местах, и я должен сопоставить маршрутизацию (например, страница сведений о продукте будет иметь входы во многих местах).

Описание функции

  1. Развернуть на vue-router, исходную логику навигации менять не нужно.
  2. pushилиforwardПри повторном отображении страницы новая отображаемая страница будет добавлена ​​в стек.
  3. backилиgo(负数)Он не будет перерисовываться при чтении предыдущей страницы из стека, а предыдущее состояние содержимого будет сохранено, например содержимое формы, скользящее положение полосы прокрутки и т. д.
  4. backилиgo(负数)удалит неиспользуемые страницы из стека, когда
  5. replaceБудет обновлять информацию о странице в стеке
  6. Активированная функция хука срабатывает при возврате на предыдущую страницу
  7. Поддержка браузера назад, вперед события
  8. Поддерживает реагирование на изменения в параметрах маршрутизации, таких как переход от /user/foo к /user/bar, экземпляр компонента будет повторно использоваться
  9. Вы можете добавлять различные анимации при переходе вперед и назад или добавлять специальные анимации на специальные страницы.

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

Установить

npm install vue-page-stack
# OR
yarn add vue-page-stack

использовать

import Vue from 'vue'
import VuePageStack from 'vue-page-stack';

// vue-router是必须的
Vue.use(VuePageStack, { router }); 

// App.vue
<template>
  <div id="app">
    <vue-page-stack>
      <router-view ></router-view>
    </vue-page-stack>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
    };
  },
  components: {},
  created() {},
  methods: {}
};
</script>

API

регистр

При регистрации можно указать имя и keyName VuePageStack, обычно не требуется

Vue.use(VuePageStack, { router, name: 'VuePageStack', keyName: 'stack-key' });

вперед и назад

Если вы хотите добавить анимацию для прямого, обратного или специального маршрута, вы можетеrouter-viewстраница через часы$route,пройти черезstack-key-dir(自定义keyName这里也随之变化)Параметры определяют направление в это время, вы можете обратиться кпример

Связанные инструкции

keyName

зачем добавлять маршрутkeyNameЭтот параметр предназначен для поддержки событий браузера назад и вперед.Эта функция очень важна для общедоступных учетных записей WeChat и небольших программ.

принцип

Получить часть стека текущей страницы со ссылкой на поддерживающую часть

заключительные замечания

Всегда помните, будут отголоски

Этот плагин давно был в моем сердце, я долго им занимался, наконец-то я его получил, я очень счастлив.

Текущая версия не была протестирована в целом бизнесом, и вы можете попробовать ее, если у вас есть такие же потребности.Если у вас есть какие-либо комментарии или предложения, добро пожаловать наGithubОтправить вопрос и PR, спасибо за вашу поддержку и вклад.

Этот плагин также заимствуетvue-navigationа такжеvue-nav, спасибо им за вдохновение.

Категории