@pilolin
HTML программист

Как запретить переходы в определенные разделы/страницы vue?

Разрабатываю приложение и столкнулся с определенной проблемой.
Приложение состоит из нескольких разделов, в каждом разделе есть сайдбар со своим списком страниц. Сделал данный сайдбар отдельным компонентом и передаю туда список роутов. вот так
Компонент
<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 поставить на данные страницы?

Совсем запутался. Если что-то не понятно и требуется дополнительные пояснения предоставлю
  • Вопрос задан
  • 83 просмотра
Пригласить эксперта
Ответы на вопрос 2
victory_vas
@victory_vas
Немного запутанное объяснение у вас, но может использовать хук beforeRouteLeave в компоненте? дока
Ответ написан
Выстраивайте логику валидации в навигационном хуке beforeEach:
const router = new VueRouter({ ... })
  router.beforeEach((to, from, next) => {
    // ... 
  })

Отменяется переход по ссылке вызовом функции next с параметром false:
next(false)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы