Vuejs 路由子链接答案

【问题标题】：Vuejs Routes children linksVuejs 路由子链接
【发布时间】：2023-04-09 07:31:01
【问题描述】：

如何正确创建嵌套路由？

const CarTable = { template: '<div>Car List</div>' }
const CarShow = { template: '<div>Car Show</div>' }
const CarCreate = { template: '<div>Car Create</div>'}


const router = new VueRouter({
  routes: [
    {path: '/car', component: CarTable,
      children: [
        {path: 'show', component: CarShow},
        {path: 'create', component: CarCreate}
      ]
}
]
})
  
  const app = new Vue({ router }).$mount('#app')

a {
text-decoration: none;
text-transform: uppercase;
color: Red;
}
a + a {
padding-left: 25px;
}

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>


<div id="app">
  <p>
    <router-link to="/car">List Car</router-link>
    <router-link to="/car/show">Car Show</router-link>
    <router-link to="/car/create">Car Create</router-link>
  </p>
  <router-view></router-view>
</div>

过渡到主类别发生：8000/car，但嵌套类别不发生：8000/car/show, :8000/car/create

【问题讨论】：

您在定义时拼写错误children。
@YashMaheshwari，谢谢，已更正，但仍然无效。
大括号在{path: '/car', component: CarTable,这一行没有闭合，应该是{path: '/car', component: CarTable}, children之类的东西

标签： laravel api vue.js

【解决方案1】：

正如vue-router doc 中所述，嵌套路由允许显示嵌套组件；例如将<router-view></router-view> 添加到您的CarTable 组件模板将显示子组件。但是我不确定嵌套路由是否是您想要实现的，如果您想要顶级、类似选项卡的组件，请使用不同的路由，例如

const router = new VueRouter({
    routes: [
        {path: '/car', component: CarTable},
        {path: '/car/show', component: CarShow},
        {path: '/car/create', component: CarCreate}
    ]
})

请参阅下面的 sn-p 以了解嵌套路由的工作示例

const CarTable = { template: '<div><div>Car List</div><router-view></router-view></div>' }
const CarShow = { template: '<div>Car Show</div>' }
const CarCreate = { template: '<div>Car Create</div>'}


const router = new VueRouter({
  routes: [
    {path: '/car', component: CarTable,
      children: [
        {path: 'show', component: CarShow},
        {path: 'create', component: CarCreate}
      ]
}
]
})
  
  const app = new Vue({ router }).$mount('#app')

a {
text-decoration: none;
text-transform: uppercase;
color: Red;
}
a + a {
padding-left: 25px;
}

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>


<div id="app">
  <p>
    <router-link to="/car">List Car</router-link>
    <router-link to="/car/show">Car Show</router-link>
    <router-link to="/car/create">Car Create</router-link>
  </p>
  <router-view></router-view>
</div>

【讨论】：