Vue 2/VueRouter: kann die Seite nicht aktualisieren, wenn auf Kinderrouten

Question

Ich kann nicht herausfinden, was passiert, wenn ich auf einer untergeordneten Route navigiere (im obigen Beispiel http://<mydomain>/applis) und dann die Seite aktualisiere => Ich habe eine

nicht // die angeforderte URL gefunden/Applis wurde nicht

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 

Darf ich habe nicht das Grundkonzept des Kindes Weg verstanden werden, auf diesem Server nicht gefunden?

Answer 1

Was in Ihrem Fall falsch scheint, ist eine übergeordnete Route mit /, während Sie bereits eine /login Route haben. Das ist auch ein Kind von /. wie die documentation sagt:

verschachtelte Pfade, die mit/beginnen, werden als Root-Pfad behandelt. Auf diese Weise können Sie die Komponentenverschachtelung nutzen, ohne eine verschachtelte URL verwenden zu müssen.

Sie können einen Blick auf Beispiel haben here die Idee zu bekommen, wie verschachtelt Routen haben. Beispielcode aus diesem 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 } 
     ] 
    } 
    ] 
}) 

Wenn Sie eine Geige mit Ihren Änderungen erstellen, wird dies hilfreich sein, genaue Lösung zu bieten.