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

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]
            }
        }
},

将路由器添加到此文件后，您始终可以使用<router-link></router-link>Vue 文件中的组件来重定向到您想要的任何路线（您也可以将数据作为 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>

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

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