5

我正在使用用于自定义功能的Laravel Nova自定义工具。vue js

创建后组件内部有一个tool.vue文件，所有内容都在那里处理。问题是我想要不同的模板（vue 文件）并在需要时渲染它们。

在这种情况下，我的主要tool.vue内容是我完全实现的带有下拉列表的搜索。vue但是我想在单击按钮后从不同的文件中呈现结果列表。（当然，另一个 vue 文件将包含一个表格或其他东西来显示数据）。

问题是如何使用 vue js 处理这个问题，以及如何在组件之间进行更改？以及如何将参数/数据从主 vue 文件传递​​到结果页面，以便我可以执行 ajax 请求等。

4

1 回答 1

3

您可能希望使用一个好的路由器来动态处理页面并采用 SPA 格式。似乎Laravel Nova正在使用vue-router.

它在您创建它时安装在自定义组件下，如果您想使用其他 vue 文件或在它们之间切换，您需要nova-components\[your-component-name]\resources\js\tool.js通过以这种格式将对象添加到路由数组中来将您的路由添加到文件下：

{
        name: '[route-name]',
        path: '/[route-path]/:[sent-prop-name]',
        component: require('./components/[your-vue-file]'),
        props: route => {
            return {
                [sent-prop-name]: route.params.[sent-prop-name]
            }
        }
},

将路由器添加到此文件后，您始终可以使用<router-link></router-link>Vue 文件中的组件重定向到您想要的任何路由（您也可以将数据作为道具发送到路由）。它的主要格式是这样的：

    <router-link
                class="btn btn-default btn-primary"
                target="_blank"
                :to="{
                          name: '[destination-route-name]',
                          params: {
                                     [your-data-name]: [your-data-value]
                          }
                 }"
                 :title="__('[your-title]')"
     >

      Submit                  

     </router-link>

PS：当然，如果您不打算向文件发送和接收任何数据，则可以省略两者的 props 和 params。

PS：您可以随时查看此处vue-router的文档以获取更多功能。

于 2018-11-21T13:59:54.423 回答