如何使用InertiaJs、Vue&amp；Laravel重新加载永久布局或观看道具

问题描述

我与InertiaJs和Vue3有一个Laravel项目。我有一个持久布局的导航，可以按预期工作。

我在用户和组织者之间有ManyToMany关系。 和我的知识库文章模型属于组织者。 每个用户只能访问属于该用户也属于的组织者的文章。 KnowledgeBase文章模型具有嵌套路由：

Route::resource('organizers.knowledgebase_articles', KnowledgebaseArticleController::class)
        ->middleware(['permission:view_all_knowledgebase_articles|view_knowledgebase_articles']);

例如：test.com/organizers/1/konowledgebase_articles

并且用户可以更改当前的组织者，以便他们只能看到其当前的组织者的文章，这是一个帖子路径，重定向回仪表板。

// OrganizerController
public function change_organizer($organizer_id)
    {
        $organizer = Organizer::findOrFail($organizer_id);
        abort_if(!$organizer->users()->where('users.id', auth()->user()->id)->exists(), 403);

        $user = auth()->user();
        $user->currentOrganizer()->associate($organizer_id);
        $user->save();

        session(['organizer_id' => $organizer->id, 'organizer_name' => $organizer->name]);

        return redirect()->route('organizer.dashboard');
    }

// PersistentLayout.vue
function changeOrganizer(organizer_id) {
    Inertia.post(route('organizer.change', { id: organizer_id }));
}

当前管理器被共享为页面道具。

并且我的导航有一个永久布局。

我的问题是，更改当前管理器后，导航链接保持不变，并且导航链接中的管理器ID不会更新。

我的问题是：我是否可以以某种方式触发页面的完全重新加载(包括永久布局)，或者我如何解决该问题？

以下是永久布局的一部分

<template>
                        <Menu as="div" class="ml-3 relative" v-if="props.auth.organizers">
                            <div>
                                <MenuButton class="max-w-xs bg-white flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                    <span>{{ props.current_organizer.organizer_name }}</span>
                                </MenuButton>
                            </div>
                            <transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
                                <MenuItems class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
                                    <MenuItem v-slot="{ active }" v-for="organizer in props.auth.organizers">
                                        <Link
                                            @click.prevent="changeOrganizer(organizer.id)"
                                            as="button">
                                            {{ organizer.name }}
                                        </Link>
                                    </MenuItem>
                                </MenuItems>
                            </transition>
                        </Menu>
</template>

<script setup>
import {ref, watch} from 'vue'

let props = defineProps({
    auth: Object,
    current_organizer: Object
});

let navigation = [
    { name: 'Dashboard', href: route('dashboard'), icon: HomeIcon, type: 'parent' },
    { name: 'Organizers', href: route('organizers.index'), icon: BriefcaseIcon, type: 'parent' },
    { name: 'Knowledgebase', href: route('organizers.knowledgebase_articles.index', {organizer: props.current_organizer.organizer_id}), icon: InboxIcon, type: 'parent' },
    { name: 'Articles', href: route('organizers.knowledgebase_articles.index', {organizer: props.current_organizer.organizer_id}), icon: null, type: 'child' },
    { name: 'Categories', href: route('organizers.knowledgebase_categories.index', {organizer: props.current_organizer.organizer_id}), icon: null, type: 'child' },

];

function changeOrganizer(organizer_id) {
    Inertia.post(route('organizer.change', { id: organizer_id }));
}
</script>

提前表示感谢！

推荐答案

我是这样做的。

<template>

 <your-menu-component :key="currentRoute"/>

</template>

<script>

export default {
computed: {
    currentRoute() {
        return location.pathname.substr(1)
    },
  },
}

当前路线更改时，菜单组件的按键更改。将触发重新加载导航