Я использую 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::')'.
Насколько я вижу, я настроил это правильно, но я вставил входные данные в свой макет, и он теряет свое содержимое каждый раз, когда я меняю страницу.
Любая помощь будет очень признательна.
Чтобы использовать функцию макета 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
},
Обязательно ознакомьтесь с документацией (раздел «Макеты по умолчанию»)
У вас есть полная перезагрузка страницы при навигации по приложению?
Да, похоже, я добавил журнал консоли в свой вызов createInertiaApp, и он выходит из системы на каждой странице.
Итак, это проблема, на которую вам следует обратить внимание: при использовании Inertia не предполагается полная перезагрузка страницы, она должна вести себя как SPA.
Вы используете <Link/>
для навигации? см. документацию для маршрутизации
нет, я просто использую обычный тег <a> с href в каждом компоненте страницы. Например, у меня есть один на моей индексной странице и один на странице редактирования.
ах-ха, большое спасибо, я попробовал добавить компонент <Link> и увидел, что у меня не работает Зигги. Я добавил его в свой проект, и теперь он работает как положено.
Я определил макет в своем компоненте, теперь попробовал ваш ответ, но, похоже, тоже не работает. Кажется, он запускает весь мой файл app.js при каждой загрузке страницы, так что не знаю, в этом ли проблема? У меня это есть в файле app.blade.php следующим образом: @vite('resources/js/app.js')