CODEWITHSUNDEEP
vue.js
badvi93d
badvi93d

Reputation: 133

Nested routes vue default

I have this root vue component

<template>
<router-view></router-view>
</template>

Router-view should match either /main, /login urls as shown in the routes below

{path: '/login',component: 'login.vue'}
{path: '/main',component: 'main.vue', children:[
  {path: '/mainchild1',component: 'mainchild1.vue'},
  {path: '/mainchild2',component: 'mainchild2.vue'
]}

The main component is a sidebar and a content-view that should be populated with /main children:

    //Main.vue
    <template>
    <sidebar></sidebar>
    <router-view></router-view>
    </template>

The idea here is to keep a sidebar and render aside either

  1. mainchild1.vue (on /main/mainchild1)
  2. mainchild2.vue (on /main/mainchild1)

Now, if no route is specified in the url i want to redirect to the main component (/main) but with at least the sub view populated (either mainchild1 or mainchild2).

Here is where i am struggling, any help/hints is appreciated.

I tried to redirect on "/" to /main/mainchild1 but it simply renders the root content, with the mainchild1.vue so removing the sidebar.

I am still learning vue and probably missing some steps in routing tecnique.

UPDATED

Ok, it seemes that i should remove the / from the child elements. This way it works.

To decide if this could be of any help or i should delete this Thanks Davide

Upvotes: 0

Views: 2308

Answers (1)

Shivam Singh
Shivam Singh

Reputation: 1731

route.js

[
  path: '/', redirect: '/main/mainchild1',
  path: '/main', redirect: '/main/mainchild1', component: 'main.vue', children: [
    { path: '/main/mainchild1', component: mainchild1.vue },
    { path: '/main/mainchild2', component: mainchild2.vue }
  ] 
]

app.vue

<template>
 <sidebar v-if="isLoggedIn"/>
 <router-view></router-view> <!-- components mapped with route '/' or '/main' will render here -->
</template>

main.vue

<template>
 <router-view></router-view> <!-- components mapped with route '/main/mainchild1' or '/main/mainchild2' will render here -->
</template>

Upvotes: 3

Related Questions