Question

这是一个体系结构问题。我对使用Vue很陌生，并且不完全了解我需要使用的良好结构。如果有帮助，我可以在Laravel应用程序中使用。

我有一个主文件index.php，其中有一个Vue路由器实例。它具有以下结构

<div>
<router-link to="/home"></router-link>
<router-link to="/about"></router-link>
<router-link to="/projects"></router-link>
<router-link to="/contact"></router-link>
</div>

<router-view></router-view>

效果很好。但是，我想扩展功能。这些路由中的每一个都呈现一个相应的组件（即HomeComponent，AboutComponent等）。特别是在一个组件（ProjectComponent）中，我想要嵌套路由。

这是我的routes.js文件中有问题的嵌套路由：

{
    path: '/projects',
    component: ProjectComponent,
    children: [
        {
            path: '/:project',
            component: ProjectShowComponent,
        }
    ]
},

因此，当您单击projects路线并到达ProjectComponent时，将看到针对该特定项目的各种项目，这些项目都有自己的router-link。我认为，由于ProjectComponent是根Vue实例的扩展，因此文件中的router-link仍会呈现router-view中的新组件，但这似乎没有工作。

我是完全不了解应该如何设计像这样的东西，还是路由中有什么不适合的东西？任何帮助或想法将不胜感激。谢谢。

Answer 1

如果您正在使用vue-router来执行此操作，则必须看看将props传递给子组件，这是vue路由器https://router.vuejs.org/guide/essentials/passing-props.html#boolean-mode

的指南

另一种选择是让laravel处理应用程序的路由。

如何从组件内部的路由器链接渲染嵌套路由？

1 个答案: