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

Question

我正在使用 Laravel Nova 自定义工具，它使用 vue js 来实现自定义功能。

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

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

问题是如何使用 vue js 处理这个问题以及如何在组件之间进行更改？以及如何将 paramters/data 从主 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> 组件来重定向到您想要的任何路由（您也可以将数据作为 props 发送到路由）。它的主要格式是这样的：

    <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：当然，如果您不打算向文件发送和接收任何数据，则可以省略两者的 props 和 params。

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

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

Using multiple pages (components) dynamically in Vue js

javascript

laravel

vue.js

vuejs2

laravel-nova