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

Posted 2023-02-22

【中文标题】在 Vue js 中动态使用多个页面（组件）

【英文标题】：Using multiple pages (components) dynamically in Vue js

【发布时间】：2019-04-15 02:03:04

【问题描述】：

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

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

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

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

【问题讨论】：

我也有同样的问题。似乎找不到解决方案。

@Fawzan 我找到了解决方案。发布答案！

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

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