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

【问题标题】：How to render a nested route from router link inside component?如何从组件内的路由器链接渲染嵌套路由？
【发布时间】：2020-01-02 05:53:49
【问题描述】：

这是一个架构问题。我对使用 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 中呈现新组件，但这似乎不起作用。

我是否完全不知道应该如何构建这样的东西，或者路由中有什么东西不正确？任何帮助或想法将不胜感激。谢谢。

【问题讨论】：

标签： laravel vue.js vue-component vue-router

【解决方案1】：

如果您使用 vue-router 来执行此操作，那么您必须查看将 props 传递给子组件，这是来自 vue router https://router.vuejs.org/guide/essentials/passing-props.html#boolean-mode 的指南

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

【讨论】：