Как избавиться от мерцания элементов при переходе между компонентами vuejs?

Question

[artmirarmi]

Доброго времени суток.

Столкнулся с такого рода проблемой, как мерцание элементов (изображения и видео) на странице при переходе между страницами в библиотеке Vue.JS.

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

Как можно избавиться от такого?

Answer 1

[Андрей]

Если они имеют общие компоненты, значит они должны быть в одном view. Те компоненты, которые меняются, должны быть привязаны к соответствующим роутам, а view должен иметь свой router-view. И навигация должна осуществляться с помощью router-link, тогда мерцания не будет. :)

Comments

[Андрей]

То есть, допустим, вы создали Home, в котором есть компонент SIdebar и Header. Вы также создали компонент Blog, в который добавили те же Sidebar и Header, а меняется у вас только Content, например.

У вас должна быть одна вьюшка с названием, например, Main, в которой будет Sidebar, Header и router-view. На месте router-view будет отрисовываться ваш динамический компонент.

[Андрей]

Тем более, что у вас изначально ошибка — дублирование кода. А подход VueJS как раз в том, чтобы его избегать. Сделайте, как я описал, и всё будет ок)

[artmirarmi]

AndrewRusinas, я понял, как вы хотите, но проблема в том, что у меня некоторые страницы имеют разную стурктуру и так как вы описали не очень удобно

[Андрей]

artmirarmi, это не я так хочу, это Vue так хочет :D
Я уверен, что у вас ничего уникального в структуре нет и подогнать под её под требования Vue лишь вопрос времени и желания.
Возможно, есть альтернативы, я лично их не нашел.

[artmirarmi]

AndrewRusinas, вот например на главной странице и странице 404 у меня нет компонентов Sidebar, Menu. А на всех остальных страницах она есть. Как в таком случае можно сделать?

[Андрей]

artmirarmi, это делается легко, но тут я вынужден направить вас в документацию Vue)
Router - Children Routes (вложенные маршруты)