Vue3-Laravel-Inertia局部重载异常：子菜单触发全局组件过渡

我具备router-view使用经验，当前在Vue3+Laravel+Inertia开发中遇到局部重载异常：页面未刷新，但所有组件均会更新。点击“Home”时，MyComponent会附带过渡效果淡入并显示子菜单（1、2、3）；但点击任意子菜单项时，我期望仅更新SubmenuComponent，而非同时触发MyComponent和SubmenuComponent的过渡效果。

现有代码结构 #

Layout.vue #

<script setup>
</script>

<template>
  <h1>This is layout</h1>
  <nav>
    <Link :href="route('home')">Home</Link>
    <Link :href="route('info')">Info</Link>
    <Link :href="route('about')">About</Link>
  </nav>
  <div class="content">
    <Transition name="page" appear>
      <span />
    </Transition>
  </div>
</template>

<style scoped lang="scss">
</style>

MyComponent.vue #

<script setup>
import Layout from "@/layouts/Layout.vue"
</script>

<template>
  <Layout>
    <h1>This is my component</h1>
    <ul>
      <li>
        <Link :href="route('my.route.1')">Menu 1</Link>
        <Link :href="route('my.route.2')">Menu 2</Link>
        <Link :href="route('my.route.3')">Menu 3</Link>
      </li>
    </ul>
    <div class="submenu-content">
      <slot />
    </div>
  </Layout>
</template>

<style scoped lang="scss">
</style>

SubmenuComponent.vue #

<script setup>
import MyComponent from "@/layouts/MyComponent.vue"
</script>

<template>
  <MyComponent>
    <h1>I'm submenu component and my content is here</h1>
  </MyComponent>
</template>

<style scoped lang="scss">
</style>

MyController.php #

public function viewSubComponent(Request $request) {
   $data = [1,2,3,4,5];
   return inertia('SubComponent', ['data' => $data]);
}

解决方案 #

1. 调整路由与组件嵌套逻辑 #

当前SubmenuComponent直接嵌套MyComponent，导致子菜单路由切换时MyComponent被重新渲染，触发根Layout的过渡动画。需将MyComponent设为父路由页面，子菜单对应子路由，让Inertia仅更新子路由组件：

• 定义Laravel子路由：

// web.php
Route::get('/home', [MyController::class, 'showMyComponent'])->name('home');
Route::get('/home/submenu/{id}', [MyController::class, 'viewSubComponent'])->name('my.route.{id}');

• 让子菜单页面直接继承MyComponent的布局，而非重新渲染它，利用Inertia的页面嵌套特性减少不必要的组件重绘。

2. 拆分过渡动画作用范围 #

将根Layout的<Transition>仅作用于顶级页面切换（Home/Info/About），子菜单过渡单独放在SubmenuComponent容器中：

修改Layout.vue：

<template>
  <h1>This is layout</h1>
  <nav>
    <Link :href="route('home')">Home</Link>
    <Link :href="route('info')">Info</Link>
    <Link :href="route('about')">About</Link>
  </nav>
  <div class="content">
    <!-- 仅顶级页面切换触发过渡 -->
    <Transition name="page" appear>
      <slot /> <!-- 渲染顶级页面组件，如MyComponent -->
    </Transition>
  </div>
</template>

修改MyComponent.vue：

<template>
  <div>
    <h1>This is my component</h1>
    <ul>
      <li>
        <Link :href="route('my.route.1')">Menu 1</Link>
        <Link :href="route('my.route.2')">Menu 2</Link>
        <Link :href="route('my.route.3')">Menu 3</Link>
      </li>
    </ul>
    <!-- 子菜单内容单独设置过渡 -->
    <Transition name="submenu" mode="out-in">
      <div class="submenu-content">
        <slot />
      </div>
    </Transition>
  </div>
</template>

3. 用Inertia参数优化更新 #

在子菜单的<Link>中添加preserve-state属性，避免父组件重新渲染：

<Link :href="route('my.route.1')" preserve-state>Menu 1</Link>

或在控制器返回时指定only参数，仅传递子组件所需数据：

public function viewSubComponent(Request $request) {
   $data = [1,2,3,4,5];
   return inertia('SubComponent', ['data' => $data])->only(['data']);
}

4. 修正组件导入笔误 #

SubmenuComponent中原导入路径存在错误，需修正为：

<script setup>
import MyComponent from "@/layouts/MyComponent.vue"
</script>

内容的提问来源于stack exchange，提问作者Aleksandar Đokić