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

Question

[Алекс]

Разрабатываю приложение и столкнулся с определенной проблемой.
Приложение состоит из нескольких разделов, в каждом разделе есть сайдбар со своим списком страниц. Сделал данный сайдбар отдельным компонентом и передаю туда список роутов. вот так
Компонент

<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 поставить на данные страницы?

Совсем запутался. Если что-то не понятно и требуется дополнительные пояснения предоставлю

Comments

[Dima Polos]

Я не совсем понял проблему. Тем не менее, мысль есть: у роутера есть хуки на переход по роутам - beforeEnter, beforeLeave.
Дока

Answer 1

[#FFFFFF]

Немного запутанное объяснение у вас, но может использовать хук beforeRouteLeave в компоненте? дока

Comments

[Dima Polos]

0_o посмотрите мой коммент под вопросом)) писал коммент, когда еще 0 ответов было, отвечаю)

[#FFFFFF]

Dima Polos, ахах, почти слово в слово)

[Dima Polos]

#FFFFFF, так да)) особенно "дока"

[Алекс]

Времени не было попробовать.. Вобщем не совсем понял где мне объявить beforeRouteLeave. Есть у меня вьюшка "раздела" т.е. это index этого раздела, все страницы выводятся как дочерние в нем выглядит вот так

<template>
	<div class="page-place">
		<secondary-sidebar :menu="menuSidebar">
			<div class="nav-secondary__img" v-if="place && place.logo" >
				<img :src="place.logo" :alt="place.name">
			</div>
		</secondary-sidebar>

		<div class="container container_color_white">
			<router-view/>
		</div>

	</div>
</template>

<script>
import { mapState } from 'vuex';
import SecondarySidebar from '@/components/SecondarySidebar';

export default {
	components: {
		SecondarySidebar
	},
	data() {
		return {
			menuSidebar: [
				{ title: 'HOME',		route: 'place.home.profile'	},
				{ title: 'INVITATION',	route: 'place.invitation'		},
				{ title: 'CUSTOMERS',	route: 'place.customers'		},
				{ title: 'INBOX',		route: 'place.inbox'				},
				{ title: 'REWARDS', 	route: 'place.rewards'			},
				{ title: 'CATALOG',	route: 'place.catalog'			},
				{ title: 'SETTINGS',	route: 'place.settings'			},
			],
		}
	},
	computed: {
		...mapState({
			companies: state => state.companyModule.companies
		}),
		// текущий place
		place: function() {
			return this.$store.getters.getPlaces.filter(elem => elem.id == this.$attrs.id)[0];
		},
	},
	beforeRouteLeave (to, from, next) {
		if( this.place.background && this.place.logo ) {
			next(false);
		} else {
			next({ name: 'place.settings' });
		}
	},
}
</script>

Но при переходе по ссылкам в сайдбаре не срабатывает beforeRouteLeave, попробовал beforeRouteUpdate, но потом до меня дошло что это дичь, так оно и оказалось - бесконечные редиректы.

Answer 2

[Dmitry Barkowski]

Выстраивайте логику валидации в навигационном хуке beforeEach:

const router = new VueRouter({ ... })
  router.beforeEach((to, from, next) => {
    // ... 
  })

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