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

Question

[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?

Answer 1

[0xD34F]

<router-view v-if="условие" />
<Component v-else />

https://jsfiddle.net/5qt9zw0g/

Answer 2

[egyptForce]

вообщем покурив еще немного документацию, оказалось, что все делается проще

if (false) {
  to.matched.find(route => route.path === to.path).components.default = Component.vue
  
  return next()
}

next()

Answer 3

[nvdfxx]

{
    path: '/somepage',
    component: condition ? component1 : component2
}

Comments

[Дмитрий Беляев]

condition отработает только на этапе инициализации роутера, а автору явно нужно в рантайме