javascript - Vue 子路由

Question

我一直在寻找一种使用 vue-router 来加快我的静态博客开发速度的方法，但我发现了将子页面与父路由链接起来的问题。

    const routes = [
      {
        path: '/',
        name: 'Home',
        component: Home
      },
      {
        path: '/about', name: 'About', component: About,
        children: [
          { 
            path: '/test', name: 'How test children link', component: prova }
        ]
    
      }
    ]

如果我尝试继续localhost/about/test地址Vue找不到页面，但是如果我直接进入localhost/test我可以到达它.

如果我将子路径更改为

    path: '/about/test', name: 'How test children link', component: prova }

它有效，但是，我不明白子路由的用途。

children 路由有什么不明白的地方？

Answer 1

您走在正确的轨道上。但是你必须记住 /意味着并做某事。

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about', name: 'About', component: About,
    children: [
      { 
        path: 'test', name: 'AboutChild', component: TestComponent 
      }
    ]
  }
]

所以基本上不包含 /为 child 添加路径时。如果这样做，请添加整个路径，因此在这种情况下:path: '/about/test'

同样重要的是，您不会看到 AboutChild 的内容直到你有一个名为 <router-view /> 的 html 标签在“关于”组件中。