@egyptForce

Как подменять компоненты маршрутов в зависимости от условия?

Есть ряд роутов: /foo /bar /baz ..., для каждого роута прописан свой компонент:

{
  path: '/foo',
  componnet: Foo.vue
},
{
  path: '/bar',
  componnet: Baz.vue
}

Также есть еще некоторый компонент Component.vue, который должен заменять родной компонент для роута и рендериться вместо него. Т.е. должно быть так же как и в случае с 404:

{
  path: '*'.
  component: 404.vue
}

Т.е. компонент 404 рендерится при любом роуте.

Если я захожу на роут /foo, мне нужно чтобы рендерился родной компонент Foo.vue если условие истинно, а если ложно - то компонент Component.vue (при этом сам url должен остаться /foo в обоих случаях).

Само это условие написано в глобальном хуке beforeEach(). Сейчас реализовано так, что когда условие ложно идет next({ path: /component }). Т.е. все работает, и я рендерю компонент Component.vue, но при этом url меняется, а я бы хотел чтобы url был тот который запросили изначально. Воможно ли этакую магию реализовать во vue-router?
  • Вопрос задан
  • 247 просмотров
Решения вопроса 2
0xD34F
@0xD34F Куратор тега Vue.js
<router-view v-if="условие" />
<Component v-else />

https://jsfiddle.net/5qt9zw0g/
Ответ написан
Комментировать
@egyptForce Автор вопроса
вообщем покурив еще немного документацию, оказалось, что все делается проще
if (false) {
  to.matched.find(route => route.path === to.path).components.default = Component.vue
  
  return next()
}

next()
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@nvdfxx
Senior Pomidor developer
{
    path: '/somepage',
    component: condition ? component1 : component2
}
Ответ написан
Ваш ответ на вопрос

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

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