如何让Vue.js组件在路由切换时实现复用/持久化？

Great question—this dives into how Vue's virtual DOM patching works, especially in a Nuxt setup where routing adds extra layers. Let's break this down clearly, from the rules Vue uses to practical fixes for your case.

Core Rules for Vue Component Reuse (From the patch() Function) #

Vue decides whether to reuse a component instance instead of destroying and recreating it based on three non-negotiable checks:

• Matching component type: The two virtual nodes (vnodes) must reference the exact same component constructor (e.g., both are your imported ComplexComponent, not two separate files exporting components with the same name).
• Matching key attribute: The key prop on both vnodes must be identical. Without a key, Vue uses an "in-place update" strategy that won’t reuse components across different parent contexts.
• Same DOM hierarchy: This is the easy-to-miss one—if the component’s position in the vnode tree changes (e.g., moving from a <div class="page-a"> wrapper to a <section class="page-b"> wrapper), Vue’s diff algorithm won’t find a matching vnode at the same level, so it’ll destroy the old component.

Why Your Complex Components Are Being Destroyed #

Given your Nuxt setup, two likely culprits are at play:

1. Components are nested inside page components: Nuxt’s <nuxt> tag fully destroys the old page component when routing to a new one—this includes all its child components, even if they have matching keys. Since your page components are separate constructor instances, Vue can’t link their nested child components as "reusable" across routes.
2. Dynamic internal structure triggers full unmount: If your complex components use dynamic subcomponents (<component :is="dynamicComp" />), async components, or conditional rendering that alters the root structure of the component’s vnode tree, Vue may decide to unmount the entire component instead of updating it—even if the parent would otherwise be reusable.

Your observation about simple components not being unmounted? Chances are those components live in your layout file (not page files), just like your headers and footers. Layouts don’t get destroyed on route changes, so their children stay mounted.

How to Get Your Components to Reuse Across Routes #

Since you don’t want to rely on keep-alive (which keeps components in memory but not necessarily attached to the layout), here are the most reliable fixes:

1. Move Components to Your Layout File #

This is the cleanest solution. If a component needs to persist across page navigations, move it out of your page components and into your Nuxt layout (e.g., layouts/default.vue), alongside your header and footer.

To adjust the component’s behavior based on the current route:

• Listen for $route changes inside the component to update state
• Use Vuex to manage shared state that the component can react to

2. Use Layout Slots for Controlled Placement #

If you need to position the component differently per page but still want to reuse the same instance, use slots in your layout. For example:

<!-- layouts/default.vue -->
<template>
  <div class="app-layout">
    <site-header />
    <slot name="persistent-component" />
    <nuxt /> <!-- Renders page content -->
    <site-footer />
  </div>
</template>

Then, in your page components, pass the component through the slot—but make sure the component instance is reused across pages. You can achieve this by registering it as a global component or storing the instance in Vuex (though this is a bit hacky; moving to the layout is still preferable).

3. Align Page Component Structures (Unreliable but Worth Trying) #

If you must keep the component in page files, ensure both pages have identical wrapper structures for the component, with matching keys:

<!-- PageA.vue -->
<template>
  <div class="page-wrapper">
    <ComplexComponent key="persistent-comp" />
    <!-- Other page content -->
  </div>
</template>

<!-- PageB.vue -->
<template>
  <div class="page-wrapper">
    <ComplexComponent key="persistent-comp" />
    <!-- Other page content -->
  </div>
</template>

Note: This isn’t guaranteed to work because Nuxt still destroys the entire page component on route change. It’s a long shot, but worth testing if you can’t move the component to the layout.

If Reuse Isn’t Possible: What to Move Outside the Component #

If you can’t get the component to persist, minimize the cost of destruction/recreation by moving these elements outside the component:

• State data: Store component state in Vuex or the root Vue instance so it survives unmounts.
• Global event listeners: Manage listeners (e.g., window resize, scroll) in a Nuxt plugin or layout instead of mounting/unmounting them inside the component.
• Async data: Fetch data in your page’s asyncData or fetch hooks, then pass it to the component as a prop—avoid letting the component fetch data on mount.
• Third-party library instances: Keep instances (e.g., charts, maps) in a global store so the component can reattach to them instead of reinitializing.

Quick Deep Dive into Vue’s patch() Function #

To tie this all together, here’s a simplified breakdown of how patch() handles component reuse:

1. Check vnode type: If the old and new vnodes are different types (e.g., a <div> vs. your component), Vue destroys the old vnode entirely.
2. Check key: If types match but keys don’t, Vue destroys the old vnode and creates a new one.
3. Reuse and update: If both type and key match, Vue reuses the existing component instance, updates its props/attrs, then recursively patches its child vnodes.
4. Recurse on children: The same checks apply to every child vnode in the tree.

The key takeaway: If the parent vnode (like your page component) is destroyed, all its children will be too—no amount of key matching can save them.

内容的提问来源于stack exchange，提问作者James Scheller