Vue 2/VueRouter : can't refresh page when on children routes

Question

I can't figure out what's happening when I navigate on a child route (in the example above http://<mydomain>/applis), and then refresh the page => I have a

Not Found // The requested URL /applis was not found on this server

import MyComponentView from './components/MyComponent.vue'
import LoginView from './components/Login.vue'
import NotFoundView from './components/404.vue'
import DashboardView from './components/subcomp1/Dashboard.vue'
import ApplisView from './components/subcomp1/Applis.vue'

const routes = [
  {
    path: '/login',
    component: LoginView
  }, {
    path: '/',
    component: MyComponentView,
    children: [
      {
        path: '',
        component: DashboardView,
        name: 'Dashboard',
        description: 'Overview of environment'
      }, {
        path: '/applis',
        component: ApplisView,
        name: 'Applis',
        description: 'Applications list'
      }
    ]
  }, {
    path: '/*',
    component: NotFoundView
  }
]
export default routes

May be I've not understood the base concept of the child route?

Answer 1

What seems wrong in your case is having a parent route with / while you already have a /login route. which is also a child of /. as the documentation says:

nested paths that start with / will be treated as a root path. This allows you to leverage the component nesting without having to use a nested URL.

You can have a look at example here to get the idea on how to have nested routes. Sample code from this link:

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        // UserHome will be rendered inside User's <router-view>
        // when /user/:id is matched
        { path: '', component: UserHome },

        // UserProfile will be rendered inside User's <router-view>
        // when /user/:id/profile is matched
        { path: 'profile', component: UserProfile },

        // UserPosts will be rendered inside User's <router-view>
        // when /user/:id/posts is matched
        { path: 'posts', component: UserPosts }
      ]
    }
  ]
})

If you can create a fiddle with your changes, this will be helpful to provide exact fix.