Использование нескольких страниц (компонентов) динамически в Vue JS - PullRequest
Новая
       19

Использование нескольких страниц (компонентов) динамически в Vue JS

0 голосов
/ 12 ноября 2018

Я использую Laravel Nova пользовательский инструмент, который использует vue js для пользовательских функций.

Существует файл tool.vue внутри компонента после создания, который все обрабатывает там. Дело в том, что я хотел бы иметь разные шаблоны (файлы vue) и отображать их всякий раз, когда они нужны.

В этом случае мой основной tool.vue - это поиск с выпадающими меню, которые я полностью реализовал. Но я хочу отобразить список результатов из другого файла vue после нажатия на кнопку. (конечно, другой файл vue будет состоять из таблицы или чего-то, что показывает данные).

Вопрос в том, как справиться с этим с помощью vue js и как я могу переключаться между компонентами? и как я могу передать параметры / данные из основного файла VUE на страницу результатов, чтобы я мог делать запросы AJAX и т. д.

1 Ответ

0 голосов
/ 21 ноября 2018

Возможно, вы захотите использовать хороший маршрутизатор для динамической обработки страниц в формате 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: Конечно, вы можете пропустить реквизиты и параметры обоих, если не собираетесь отправлять и получать какие-либо данные в файл.

PS: Вы всегда можете посмотреть vue-router документацию здесь , чтобы узнать больше возможностей.

...