CODEWITHSUNDEEP
vue.jsvue-router
Elijah Woelbing
Elijah Woelbing

Reputation: 33

I would like to use the same route from two components how can I do this using vue router

I would like to use the same route to display different components based on whether or not the client is authenticated. I am unable to find info on this in the router documentation. Here is the same question but the answer seems to be outdated as router.map is deprecated. Vue.js - two different components on same route Please point me in the right direction, thank you!

Upvotes: 0

Views: 104

Answers (2)

LLai
LLai

Reputation: 13416

I'm not sure if dynamic routing within the router itself is supported at this time. An alternative is to load a wrapper component in your router. Then that component determines what nested components to show.

routes: [
    {
        path: '/',
        component: WrapperComponent
    }
]

<!-- WrapperComponent -->
<template v-if="auth">
    <auth-view />
</template>
<template v-else>
    <non-auth-view />
<template>

Upvotes: 1

Abdelillah Aissani
Abdelillah Aissani

Reputation: 3108

You can use mulitple components on a single path using named views :

example : 

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        component1,
        component2
      }
    }
  ]
})

<!-- this will display component1 on the path '/' -->
<router-view name="component1"></router-view>

<!-- this will display component2 on the path '/' -->
<router-view name="component2"></router-view>

Upvotes: 0

Related Questions