Постоянные макеты в Inertia и Laravel

Я использую Laravel 11 с Vue 3, InertiaJS и Vite. Я настроил административную область для своего сайта и хочу использовать постоянный макет.

Я просмотрел документы по инерции и увидел следующее

<script setup>
import Layout from './Layout'

defineOptions({ layout: Layout })
</script>

Я использую пакет laravel, который я создал в качестве основы. Он содержит мой макет со ссылкой «@fire».

Итак, я добавил это в свой компонент;

import Admin from "@fire/Pages/Layouts/Admin.vue"

defineOptions({ layout: Admin })

Мой текущий файл app.js выглядит следующим образом:

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'

createInertiaApp({
  resolve: name => {
    const pages = Object.assign(
      {}, 
      import.meta.glob('@pages/Pages/**/*.vue', { eager: true }), 
      import.meta.glob('./Pages/**/*.vue', { eager: true })
    );

    let page
    if (name.startsWith('PackageName::')) {
      page = pages[`./Pages/${name.split('PackageName::')[1]}.vue`]
    } else {
      page = pages[`/resources/js/Pages/${name}.vue`]
    }
    return page
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

Опять же, у меня есть ссылка «@», которую я установил в Vite. Мне также нужно проверить, исходит ли представление для загрузки из моего пакета или корневой папки ресурсов, что является причиной оператора if 'name.startsWith('PackageName::')'.

Насколько я вижу, я настроил это правильно, но я вставил входные данные в свой макет, и он теряет свое содержимое каждый раз, когда я меняю страницу.

Любая помощь будет очень признательна.

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Оживление вашего приложения Laravel: Понимание режима обслуживания
Оживление вашего приложения Laravel: Понимание режима обслуживания
Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...
Коллекции в Laravel более простым способом
Коллекции в Laravel более простым способом
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...
Поиск нового уровня в Laravel с помощью MeiliSearch и Scout
Поиск нового уровня в Laravel с помощью MeiliSearch и Scout
Laravel Scout - это популярный пакет, который предоставляет простой и удобный способ добавить полнотекстовый поиск в ваше приложение Laravel. Он...
Освоение архитектуры микросервисов с Laravel: Лучшие практики, преимущества и советы для разработчиков
Освоение архитектуры микросервисов с Laravel: Лучшие практики, преимущества и советы для разработчиков
В последние годы архитектура микросервисов приобрела популярность как способ построения масштабируемых и гибких приложений. Laravel , популярный PHP...
Как построить CRUD-приложение в Laravel
Как построить CRUD-приложение в Laravel
Laravel - это популярный PHP-фреймворк, который позволяет быстро и легко создавать веб-приложения. Одной из наиболее распространенных задач в...
0
0
56
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Чтобы использовать функцию макета Inertia, вам необходимо указать макет на самой отображаемой странице. Поскольку вы используете страницы пакета, вам может потребоваться определить макеты в экземпляре приложения:


createInertiaApp({
  resolve: name => {
    const pages = Object.assign(
      ...
    
    if (name.startsWith('PackageName::')) {
       
      page = pages[`./Pages/${name.split('PackageName::')[1]}.vue`]
      // Add the layout here: 
      page.default.layout = AdminLayout // Or whatever layout you want to use
    } else {
      page = pages[`/resources/js/Pages/${name}.vue`]
      page.default.layout = DefaultLayout
    }
    return page
  },

Обязательно ознакомьтесь с документацией (раздел «Макеты по умолчанию»)

Я определил макет в своем компоненте, теперь попробовал ваш ответ, но, похоже, тоже не работает. Кажется, он запускает весь мой файл app.js при каждой загрузке страницы, так что не знаю, в этом ли проблема? У меня это есть в файле app.blade.php следующим образом: @vite('resources/js/app.js')

James Baker 11.08.2024 11:48

У вас есть полная перезагрузка страницы при навигации по приложению?

Shaya Ulman 11.08.2024 20:07

Да, похоже, я добавил журнал консоли в свой вызов createInertiaApp, и он выходит из системы на каждой странице.

James Baker 11.08.2024 20:58

Итак, это проблема, на которую вам следует обратить внимание: при использовании Inertia не предполагается полная перезагрузка страницы, она должна вести себя как SPA.

Shaya Ulman 12.08.2024 18:38

Вы используете <Link/> для навигации? см. документацию для маршрутизации

Shaya Ulman 12.08.2024 18:40

нет, я просто использую обычный тег <a> с href в каждом компоненте страницы. Например, у меня есть один на моей индексной странице и один на странице редактирования.

James Baker 12.08.2024 19:05

ах-ха, большое спасибо, я попробовал добавить компонент <Link> и увидел, что у меня не работает Зигги. Я добавил его в свой проект, и теперь он работает как положено.

James Baker 12.08.2024 19:34

Другие вопросы по теме