The methods to create reusable layouts in Vue projects include: 1. Use to achieve basic layout reuse, and use common layout components (such as DefaultLayout.vue) and cooperate with the routing children structure to enable multiple pages to share the same layout; 2. Use Vue slot mechanism to achieve flexible layout, define customizable areas (such as header) through named slots, allowing different pages to insert personalized content; 3. Extract the layout as independent components and dynamically select the layout with routing meta information, which is suitable for multi-type layout scenarios (such as AdminLayout and AuthLayout); 4. Use named views and multi-layer nested layout to implement complex structures, which are suitable for multiple dynamic areas or "layout layouts" in large systems. These methods can effectively reduce duplicate code, unify styles and improve maintenance efficiency.

Creating reusable layouts in Vue projects is a key practice to improve development efficiency and maintain consistency in page structure. If you want to reduce duplicate code, unify styles and facilitate post-maintenance, the following methods can help you truly implement them.

Use <router-view></router-view> to achieve basic layout reuse

Vue Router provides a <router-view></router-view> component that allows you to easily load different content areas dynamically in a fixed layout. This is the most common and recommended way.

For example, you can create a DefaultLayout.vue file, which contains the common header, sidebar and bottom, and leave <router-view></router-view> as the subpage insertion point:

 <template>
  <div class="layout">
    <Header />
    <Sidebar />
    <main>
      <router-view />
    </main>
    <Footer />
  </div>
</template>

Then use the children structure in the routing configuration to nest multiple pages into this layout. In this way, you only need to define the layout structure once and you can reuse it for multiple pages.

Using Vue's component slots (Slot) to achieve flexible layout

Sometimes you may need a more flexible layout, such as inserting different title bars or action buttons according to different pages. At this time, you can use Vue's slot mechanism to enhance the flexibility of layout components.

For example, you could create a BaseLayout.vue and define a named slot in it:

 <template>
  <div class="base-layout">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
  </div>
</template>

When using it in a specific page, you can customize the header content:

 <BaseLayout>
  <template #header>
    <h1>My Page Title</h1>
  </template>
  <p>This is the main content</p>
</BaseLayout>

This method allows layout components to maintain the overall structure consistency, and to customize local content according to different scenarios.

Extract layout as independent component routing meta information control

If you have multiple different types of layouts (such as one for background management and another for login pages), you can extract them into separate components and dynamically select the layout with routing meta information.

The steps are as follows:

• Create multiple layout components: AdminLayout.vue , AuthLayout.vue , etc.;
• Add the meta.layout field in the routing configuration to identify the layout that the page should use;
• Dynamically render the corresponding layout component in App.vue or main entry component based on the current routed meta.

Example routing configuration:

 {
  path: '/dashboard',
  component: Dashboard,
  meta: { layout: 'admin' }
}

Then you can write a simple mapping logic to render the corresponding layout component according to the current route in App.vue.

Tips: Named views and multi-layer nested layouts

If your project is complex enough, you can also use the named view function of Vue Router to display multiple dynamic areas in the same layout, such as updating content in left and right columns.

Or use multi-layer nested routing to build a "layout layout" structure, suitable for large systems.

However, this type of advanced usage is more suitable for projects with clear needs, and over-design is not recommended in the early stage.

Basically, these methods can be used in combination according to project size and requirements. The core is: to extract general structures and rationally utilize slots and routing mechanisms, so that the layout is both unified and flexible .

The above is the detailed content of How to create reusable layouts in Vue?. For more information, please follow other related articles on the PHP Chinese website!