Разрабатываю приложение и столкнулся с определенной проблемой.
Приложение состоит из нескольких разделов, в каждом разделе есть сайдбар со своим списком страниц. Сделал данный сайдбар отдельным компонентом и передаю туда список роутов. вот так
Компонент
<template>
<div class="nav nav-secondary" :class="{ 'opened': openedSidebar }">
<button
class="nav-toggle nav-toggle-secondary"
@click="openedSidebar = !openedSidebar"></button>
<slot/>
<nav>
<ul class="blank">
<li
v-for="(menuItem, indexItem) in menu"
:key="indexItem"
:class="{ active: $route.name === menuItem.route }">
<router-link :to="{ name: menuItem.route }"">{{ menuItem.title }}</router-link>
</li>
</ul>
</nav>
</div>
</template>
<script>
export default {
props: {
menu: {
type: Array,
reuired: true
}
},
data() {
return {
openedSidebar: false
}
}
}
</script>
И параметры такие уходят в него
menuSidebar: [
{ title: 'HOME', route: 'place.home.profile' },
{ title: 'INVITATION', route: 'place.invitation' },
{ title: 'CUSTOMERS', route: 'place.customers' },
{ title: 'SETTINGS', route: 'place.settings' },
],
По логике приложения я создаю компанию в разделе (1) и должен перейти сразу router.push в раздел (2) и далее в нём в setting (это все ок). Пока setting я все не заполню я не могу перейти в этом разделе (2) на другие страницы т.е home, invitation и тд. Компания соответственно хранится во vuex store, если ее там нет идет запрос на сервер и добавляется в store.
Вот в этом и проблема как мне отключить ссылки, а так впринципе guard поставить на данные страницы?
Совсем запутался. Если что-то не понятно и требуется дополнительные пояснения предоставлю
