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 
      }
    ]
  }
]

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

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

Vue 子路由

Vue children route

javascript

vue.js

vue-router