Question

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

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

在这种情况下，我主要的tool.vue是一个带有下拉列表的搜索，而该搜索完全由我实现。但是我想在单击按钮后从另一个vue文件中呈现结果列表。（当然，另一个vue文件将由一个表或用于显示数据的内容组成）。

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

Answer 1

您可能想使用一个好的路由器来以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]
            }
        }
},

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

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

P.S：当然，如果您不打算向文件发送和接收任何数据，则可以同时省略prop和params。

P.S：您可以随时查看vue-router文档here了解更多功能。

在Vue js中动态使用多个页面（组件）

1 个答案: