[vue-page-stack] Официально выпущен одностраничный менеджер навигации по приложениям Vue

внешний интерфейс
[vue-page-stack] Официально выпущен одностраничный менеджер навигации по приложениям Vue

[обновление 20191031] Решить проблему со сценой страницы A -> страницы A

[обновление 20190828] Адаптация к vue-router 3.1.x

Я задержался на месяц из-за сложного онлайн-чата посередине, извините. Давайте сначала поговорим о результатах, которые были проверены в нескольких средах, включая ios, Android, официальную учетную запись WeChat, апплет WeChat (да, апплет также может выполнять чистые проекты H5), все из которых являются более сложными предприятиями, все в Чистый одностраничный проект H5 под веб-просмотром может идеально решить наши бизнес-задачи.

Версия 1.0.0 была загружена в npm, и наш внутренний проект начал использовать ее официально. Добро пожаловать в использование, добро пожаловать в Star, я надеюсь помочь вам.

адрес проекта

Если вы не знаете, в чем проблема, вы можете посмотретьРезюме

представление

Давайте сначала поговорим о проблемах с производительностью, которые всех больше всего беспокоят.Vueавтономныйkeep-aliveКомпоненты намного лучше, потому чтоkeep-aliveПосле кэширования один раз вkeep-aliveкомпонентыdestroyedВсе предыдущие тайники не будут уничтожены, ноvue-page-stackОн кэшируется и уничтожается в соответствии с иерархией пользовательского интерфейса. использовать нижеvue-devtoolпоказать разницу

На приведенном выше рисунке мы можем четко видеть состояние компонента активации и компонента кэша,vue-page-stackСохраните пользовательский интерфейс в стеке, извлеките его и активируйте при откате, а также очистите кеш от неиспользуемых компонентов;keep-aliveбудет кэшировать все компоненты, которые вы активировали

принцип

Я сказал это в прошлый раз для справкиkeep-aliveкод, некоторый код вставлен ниже для справки

render() {
  let key = this.$route.query[keyName];
  const slot = this.$slots.default;
  // 获取当前页面的vnode
  const vnode = getFirstComponentChild(slot);
  if (!vnode) {
    return vnode;
  }
  // 查看当前页面是否有缓存
  let index = getIndexByKey(key);
  if (index !== -1) {
    // 有缓存的话就取出缓存，并且清除排在他后面的所有vnode
    vnode.componentInstance = stack[index].vnode.componentInstance;
    // destroy the instances that will be spliced
    for (let i = index + 1; i < stack.length; i++) {
      stack[i].vnode.componentInstance.$destroy();
      stack[i] = null;
    }
    stack.splice(index + 1);
  } else {
    // 没有缓存就是新的页面，需要存储或者是replace当前页面
    if (history.action === config.replaceName) {
      // destroy the instance
      stack[stack.length - 1].vnode.componentInstance.$destroy();
      stack[stack.length - 1] = null;
      stack.splice(stack.length - 1);
    }
    // 向栈里面push
    stack.push({ key, vnode });
  }
  vnode.data.keepAlive = true;
  return vnode;
}

npm version

Менеджер навигации по одностраничным приложениям Vue

Функции

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

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

Установить

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

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

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

// vue-router is necessary
Vue.use(VuePageStack, { router }); 

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

CDN

<script src="https://unpkg.com/vue-page-stack/dist/vue-page-stack.js"></script>

Vue.use(VuePageStack.default, { router });

API

Зарегистрировать плагин

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

use Vue.use to install vue-page-stackПлагины должны быть зарегистрированы перед использованием

Vue.use(VuePageStack, options);
// example
Vue.use(VuePageStack, { router });

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

Attribute Description Type Accepted Values Default
router vue-router instance Object vue-router instance -
name VuePageStack name String 'VuePageStack' 'VuePageStack'
keyName stack-key name String 'stack-key' 'stack-key'

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

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

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

Если вы хотите добавить анимацию при переходе страницы вперед или назад, вы можете передатьstack-key-dirсудить

// App.vue
$route(to, from) {
  if (to.params['stack-key-dir'] === 'forward') {
    this.transitionName = 'forward';
  } else {
    this.transitionName = 'back';
  }
}

example

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

keyName

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

принцип

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

благодарный

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

Категории