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 }

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

关于儿童路线我不明白什么？

Answer 1

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

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

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

同样重要的是，在 About 组件中有一个名为 <router-view /> 的 html 标记之前，您不会看到 AboutChild 的内容。