0

У меня на сайте есть компонент боковой панели, содержащий контекстные ссылки:

<template>
  <ul class="navbar-nav">
    <li class="nav-item" v-if="this.$router.currentRoute.name === 'PersonDetails'">
      <router-link
        :to="{ name: 'PersonHistory', params: { id: this.$router.currentRoute.params.id } }"
        >история изменений карточки</router-link>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'NavigationSidebar',
};
</script>

Проблема в том, что при клике на ссылку в sidebar сам переход происходит на новый route, но не происходит изменения отрисовки компонента, хотя условия в v-if'ах уже должны были скрыть одни пункты и показать другие.

В сети в похожих случаях встречаются рекомендации использовать beforeRouteUpdate, но непонятно, какой хук жизненного цикла компонента вызвать. (Ну и логично, что можно watch вспомнить — проблема та же: что вызывать при изменениях?)

Также видел рекомендацию использовать key для router-view, попробовал её, а также наугад попробовал на уровне template компонента задать — ни то, ни то не помогло. :(

Перешерстил документацию, натолкнулся на любопытный вариант с v-bind:is но увы, там нельзя указать строку, нужен компонент:

  computed: {
    currentTabComponent() {
      return this.$router.currentRoute.name;
    },
  },

поэтому выдаёт ошибку '[Vue warn]: Unknown custom element: - did you register the component correctly?'

Что можно в данном случае сделать? Vue 2.6.11, типовой router в режиме history.

6
  • Натолкнулся на интересную статью по способам re-render плюс на so такой же ответ, сижу пробую.
    – A K
    23 июл 2020 в 9:12
  • У Вас проблема в том, что по разным роутам отображается один и тот же компонент? 23 июл 2020 в 9:13
  • Да, проблема именно в этом: по разным роутам один и тот же компонент, точнее компонент и ожидается один и тот же, но в зависимости от разных роутов должен отрисовываться иначе.
    – A K
    23 июл 2020 в 9:17
  • Весь пример для воспроизведения сводится по факту к строке <navigation-sidebar :key="currentComponentKey"></navigation-sidebar>, больше там ничего нет.
    – A K
    23 июл 2020 в 9:17
  • Да, иногда такие проблемы решается методом "тыка") . И насоветовать можно много разного. Попробуйте текущий роут поместить в computed : curRoute() return this.$router.currentRoute.name . И уже в v-if - сравнивайте со значением computed 23 июл 2020 в 9:23

1 ответ 1

2

Ну надо же... всё совершенно спокойно работает если записать так:

<li class="nav-item" v-if="this.$route.name === 'PersonDetails'">

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.