Vue js - Routing and Conditional Rendering

user_16116283 0
Viewed 234

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

vue.js conditional-rendering routes
2 Answers

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

user_97335460

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.

user_161162830
Related