2

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 :)

Luca
  • 57
  • 4
  • 1
    If you want a route not have the parent visible... better have the route as a sibling of the parent route. – Venkatesh A Sep 20 '21 at 14:57
  • Okay thanks, but how do i then render the components together? Could you maybe do a sample Code for me? – Luca Sep 20 '21 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 Sep 21 '21 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 Sep 21 '21 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 Sep 21 '21 at 16:36
  • Yes, thats ist. :) – Luca Sep 22 '21 at 17:35
  • Added the answer does it help – Venkatesh A Sep 22 '21 at 17:42
  • I think it's a step in the right direction, but I don't know how to get access to the parent component over the '$route' object. If I can get access to it I can also change the variable, which I can use to conditional render per 'v-if' right? – Luca Sep 22 '21 at 17:52

2 Answers2

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

Venkatesh A
  • 1,875
  • 1
  • 19
  • 23
  • 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 Sep 22 '21 at 18:07
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.

Luca
  • 57
  • 4