Vue router - запускает refre sh при изменении маршрута c Dynami через ссылки на следующую / предыдущую публикацию в блоге - PullRequest
Новая
       11

Vue router - запускает refre sh при изменении маршрута c Dynami через ссылки на следующую / предыдущую публикацию в блоге

0 голосов
/ 10 июля 2020

Я относительно новичок в Vue, и я работаю над сайтом портфолио, который по сути структурирован как блог с отдельными / подробными представлениями для каждого проекта, то есть SingleProject.vue и связан с помощью динамического c маршруты на основе имени слага, например path: "/projects/:project_name_slug". В шаблоне я использую Ax ios для запроса данных JSON из CMS и передаю данные в переменную post через функцию fetchPosts(). Затем я запускаю this.fetchPosts() на крюке жизненного цикла mounted. В этом единственном представлении проекта у меня также есть ссылки на проекты следующий и предыдущий в соответствии с порядком, определенным в CMS. Я сохраняю данные JSON в соответствующие массивы для nextPost и prevPost, а затем создаю ссылки маршрутизатора с использованием имен пост-слагов следующим образом: 

<router-link
    v-if="nextPost"
    :to="{path: '/projects/' + nextPost.project_name_slug}"
>Next Project</router-link>

Теперь перейдем к моему фактическому вопрос: эти ссылки для следующих / предыдущих сообщений работают нормально; но при нажатии вид не полностью обновляется / не переходит, и все текстовые данные - заголовок, информация на боковой панели и т. д. c. - изменяются быстро, но изображения немного задерживаются во время загрузки (см. диаграмму ниже для visual.) Итак, на мгновение вы увидите изображение из предыдущего проекта вместе с текстовой информацией для следующего, пока загружается новое изображение. Это немного отвлекает / отталкивает, поэтому я пытаюсь найти способ существенно перезагрузить представление (как если бы вы вообще нажимали на другой [статический] маршрут) при нажатии на одну из этих ссылок, чтобы изменить динамику. c маршрут. Я нашел этот полезный пост SO , в котором предлагается добавить ключ изменения к <router-view>, чтобы запускать полный жизненный цикл при изменении пути, т.е. 

<router-view :key="$route.fullPath"></router-view>

Этот подход работает и действительно заставляет все представление SingleProject (изображения и все) обновлять sh при изменении маршрутов через следующие / предыдущие ссылки. Однако мне интересно, есть ли лучший / более эффективный способ ограничить этот жизненный цикл refre sh только маршрутами Dynami c (просмотр проекта)? Я понимаю, как отмечалось в этом потоке, этот подход может повлиять на производительность, заставляя перезапускать все изменения маршрута, а не только те, которые связаны с отдельными представлениями проекта. Пожалуйста, дайте мне знать, если это непонятно - и спасибо за любую информацию!

SingleProject. vue схема размещения

1 Ответ

0 голосов
/ 10 июля 2020

Если вы хотите заработать такие вещи, вы можете сделать это, поместив все необходимые маршруты в переменную, которая является объектом. Затем вы можете определить некоторые логики для переключения между ними и применения к компоненту и использовать его глобально.

Ах, кстати, вы можете использовать хороший инструмент под названием Vuepress. У него есть собственные кнопки «Предыдущая» и «Следующая». Можно сказать, что это для документации. Нет вы можете создавать блоги и портфолио ios тоже. Так много проектов, созданных с помощью Vuepress на inte rnet. И даже вы можете изменить макеты, стили или создать свою собственную тему с нуля.

Ниже вы можете найти ссылки на множество различных проектов и веб-сайтов. И большинство из них - это готовые темы для использования в ваших проектах. https://github.com/topics/vuepress-theme

...