How to replace route components depending on a condition?

Question

Vue.js

There are a number of routes: /foo /bar /baz ..., each route has its own component:

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

There is also some Component.vue component that should replace the native component for the route and render instead of it. Those. should be the same as in the case of 404:

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

Those. component 404 is rendered on any route.

If I go to the route /foo, I need the native Foo.vue component to be rendered if the condition is true, and if the condition is false, then the Component.vue component (while the url itself should remain /foo in both cases).

This condition itself is written in the beforeEach() global hook. Now it is implemented so that when the condition is false, next({ path: /component }). Those. everything works, and I render the Component.vue component, but the url changes, and I would like the url to be the one that was originally requested. Is it possible to implement such magic in vue-router?

Answer 1

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

https://jsfiddle.net/5qt9zw0g/

Answer 2

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