Несколько компонентов на один маршрут Vue-Router
Мне бы хотелось использовать разные компоненты для одного маршрута в зависимости от параметров этого маршрута. Чтобы была возможность переходить по данному адресу и попадать или на валидный компонент или на компонент ошибки. Можно ли это осуществить? Не хотелось бы делать это в глобальном хуке beforeEach. Есть ли хорошая практика для таких случаев? Спасибо!
routes.js
const routes = [
{name: 'lesson', path: 'lesson:id', components: { lesson: Lesson, error: E404 }, props: {
lesson: true,
error: false
}
}
]
Ответы (1 шт):
Хорошая практика это использовать инструменты для того, для чего они предназначены. Роутер - для роутинга и логики связанной с роутингом.
Ваш вопрос связан с логикой отображения.
Вы можете создать что то вроде прокси компонента. Роутер всегда открывает этот компонент. И в этом компоненте будет логика отвечающая за отображение необходимого состояния (вероятнее всего это другой компонент.
router.js
const routes = [
{
name: 'lesson',
path: 'lesson:id',
component: Proxy,
props: {
lesson: true,
error: false
}
}
]
Proxy.vue
<template>
<template v-if="lesson">
<Lesson></Lesson>
</template>
<template v-else-if="error">
<Error></Error>
</template>
<template v-else></template>
</template>
<script>
export default {
name: "Proxy",
props: {
lesson: {
type: Boolean,
default: false
},
error: {
type: Boolean,
default: false
}
}
};
</script>