Redirect or Default router-view?

[delaneyj]

I'm currently adding extra routes like this

import routes from 'voie-pages'
routes.push({
  path: '/',
  redirect: { path: '/welcome' },
})

But for nested rounts it gets more complicated.

Say you have /dashboard with user/events as subfolders. Would it be possible to have something like index[user].vue' so the dashboards router-view get set to the right default sub route?

[delaneyj]

also I seem to miss understand the interface to the nested routes. The extra folder per nesting seems unnecessary unless I'm missing something. The folder structure should imply the use of router-view.

index[dashboard].vue
dashboard
index[users].vue
users
index.vue
events
index.vue

So / would point at /dashboard/users which would be the nesting of Dashboard>. Am I making any sense?

[brattonross]

Hey @delaneyj,

I'm not sure that I'm following, but hopefully I can try to make things clearer for you.

Let's say you have the following folder structure:

pages/
  dashboard/
    index.vue
    events.vue
    users.vue

Voie will map these files to routes like so:

[
  {
    path: '/dashboard',
    component: '/pages/dashboard/index.vue'
  },
  {
    path: '/dashboard/events',
    component: '/pages/dashboard/events.vue'
  },
  {
    path: '/dashboard/users',
    component: '/pages/dashboard/users.vue'
  }
]

The thing to note here is that even though these routes are within the same directory they do not have a common parent route, and so the only instance of <router-view> that should be present will be in App.vue.

If you want these pages to have a common parent route, then you need to add a dashboard.vue file at the same level as your dashboard directory, like this:

pages/
  dashboard.vue
  dashboard/
    index.vue
    events.vue
    users.vue

Voie will then map the routes like so:

[
  {
    path: '/dashboard',
    component: '/pages/dashboard.vue',
    children: [
      {
        path: '',
        component: '/pages/dashboard/index.vue'
      },
      {
        path: 'events',
        component: '/pages/dashboard/events.vue'
      },
      {
        path: 'users',
        component: '/pages/dashboard/users.vue'
      }
    ]
  }
]

This time the dashboard.vue component becomes the parent of the 3 routes in the dashboard directory, and should contain a <router-view> so that the children can be rendered. You can use this to create common layouts for pages in the same directory.

[andreasvirkus]

Is the dashboard.vue also necessary when i'd want to have a page with props? Currently without it, the props route seems to have higher priority than the index.vue file (since I imagine it's first in the list of generated routes and always matches):

pages/
  users/
    [id].vue
    index.vue

So if i'd want to access the index.vue from /users, would I also need a pages/users.vue component? Sorry to thread-jack, but my issue felt related