У меня на сайте есть компонент боковой панели, содержащий контекстные ссылки:
<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.
<navigation-sidebar :key="currentComponentKey"></navigation-sidebar>
, больше там ничего нет.curRoute() return this.$router.currentRoute.name
. И уже в v-if - сравнивайте со значением computed