VUE JS: How to keep same structure in whole project but different header and footer for each page-CodePudding

I am using router-view. In App.vue I want this structure so in every other pages I can have different header, footer but overall structure:

    <router-view>
          <template>
            <div >
              <header>
                <slot name="header"></slot>
              </header>
              <main>
                <slot></slot>
              </main>
              <footer>
                <slot name="footer"></slot>
              </footer>
            </div>
          </template>
        </router-view>

In home page component I want to do something like this:
<slot name="header">header content</slot>
<slot name="footer">footer content</slot>
Othercontent here....

In about us page component I want to do something like this:
<slot name="header">about header content</slot>
<slot name="footer">about footer content</slot>
Othercontent here....

how can I achive this?

CodePudding user response：

<your-base-layout>
   <slot #header>about header content</slot>
   <slot #footer>about footer content</slot>
</your-base-layout>

its called "Named Slot"

CodePudding user response：

The solution goes around layouts and sub-pages where layouts are parents and related pages placed as children.

Consider these two layouts:

// src/layouts/PublicLayout.vue
<template>
  <section >
    <router-view/>
  </section>
</template>
<script>
export default {
  name: 'PublicLayout',
};
</script>

and

// src/layouts/MainLayout.vue
<template>
  <section >
    <!-- header -->
    <router-view/>
    <!-- footer -->
  </section>
</template>
<script>
export default {
  name: 'MainLayout',
};
</script>

Now, you can tune routes in your flavor:

// src/router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';

const publicRoutes = [
  {
    path: '/public',
    component: () => import('layouts/PublicLayout.vue'),
    children: [
      {
        path: 'login',
        name: 'Login',
        component: () => import('pages/ULogin.vue'),
      },
      {
        path: 'sign-up',
        name: 'SignUp',
        component: () => import('pages/USignUp.vue'),
      },
    ],
  },
];
const mainRoutes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      {
        path: '',
        name: 'Home',
        component: () => import('pages/UHome.vue'),
      },
      {
        path: 'profile',
        name: 'Profile',
        component: () => import('pages/Profile.vue'),
      },
    ],
  },
];

const Router = new VueRouter({   
    routes: mainRoutes.concat(publicRoutes),
});

// snippet skipped

Here, MainLayout and PublicLayout play the structural role while other pages are placed as their children. By navigating to each page (e.g. from /login to /profile) the proper layout will get loaded as well.