Vue js - Routing and Conditional Rendering

Question

Hello I am relatively new to VueJS and have a question to conditional rendering while using the Cue Router.

i have my routes the as the following set up:

const routes = [
  {
    path: '/',
    component: () => import('layouts/Layout.vue'),
    children: [
      { path: '/info', component: () => import('pages/Info.vue') },
      { path: '/order', component: () => import('pages/Order.vue') },
      { path: '/setup', component: () => import('pages/Mapping')}
    ]
  }
]

The layout basically is just for the Header and NavBar on the left side.

Now I want to be able to change the header and the NavBar to invisible from the setup Page by conditional rendering them in the layout with v-if. And I don't know how to get access from Setup.vue to the Layout.vue.

This is probably a stupid question but I just don't find a solution.

Thanks for your time :)

If you want a route not have the parent visible... better have the route as a sibling of the parent route. — Venkatesh A
– Venkatesh A, Commented Sep 20, 2021 at 14:57
Okay thanks, but how do i then render the components together? Could you maybe do a sample Code for me? — Luca
– Luca, Commented Sep 20, 2021 at 16:39
Hey @VenkateshA I have tried it with the route as sibling but it did worked out. For some reason I can't even manually open up the page and get there Error: CANNOT GET /mapping. Can you please help me? — Luca
– Luca, Commented Sep 21, 2021 at 12:16
These are the routes i use: ``` const routes = [ { path: '/', component: () => import('layouts/Layout.vue'), children: [ { path: '/info', component: () => import('pages/Info.vue') }, { path: '/order', component: () => import('pages/Order.vue') }, { path: '/setup', component: () => import('pages/SetupMap.vue')} ] }, { path:'/mapping', component: () => import('pages/Mapping.vue') } ] ``` — Luca
– Luca, Commented Sep 21, 2021 at 12:18
so the pblm is to hide a few sections in the parent component in a certain child route is that it? — Venkatesh A
– Venkatesh A, Commented Sep 21, 2021 at 16:36

Venkatesh A · Accepted Answer · 2021-09-21 16:52:13Z

0

To find the current route in the component try using the object '$route'. It would have all of the parameters, query, route path, redirected from etc. With that you could use v-if inside the component logic

answered Sep 21, 2021 at 16:52

Venkatesh A

2,5743 gold badges24 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Luca Over a year ago

I got to the point where I could get the (Layout)-Component by calling ´this.$route.matched[0].components´but then I got stuck, because I cannot call ´data()´ from this component to get access to my variable

Luca · Accepted Answer · 2021-10-02 10:40:52Z

0

So as expected was the solution somewhat trivial:

Added the sibling route, but because I use Quasar predefined Components and I forgot the q-layout and the q-page-container Tag, It could not load the page content.

answered Oct 2, 2021 at 10:40

Luca

574 bronze badges

Collectives™ on Stack Overflow

Vue js - Routing and Conditional Rendering

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related