创建可以在Vue和React应用程序中使用的动态页眉和动态页脚的最佳方法是什么？

// HeaderFooter.vue
<template>
  <header>Header Content</header>
  <footer>Footer Content</footer>
</template>

<script>
export default {
  name: 'HeaderFooter'
}
</script>

import Vue from 'vue';
import HeaderFooter from './components/HeaderFooter.vue';

Vue.component('HeaderFooter', HeaderFooter);

new Vue({
  render: h => h(App),
}).$mount('#app');

// HeaderFooter.js
import React from 'react';

const HeaderFooter = () => (
  <>
    <header>Header Content</header>
    <footer>Footer Content</footer>
  </>
);

export default HeaderFooter;

// App.js
import React from 'react';
import HeaderFooter from './HeaderFooter';

const App = () => (
  <div>
    <HeaderFooter />
    {/* 其他组件 */}
  </div>
);

export default App;

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

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/login',
      component: () => import('@/components/Login.vue'),
      meta: { hideHeaderFooter: true }
    },
    // 其他路由
  ]
});

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.hideHeaderFooter)) {
    // 隐藏页眉和页脚
  } else {
    // 显示页眉和页脚
  }
  next();
});

export default router;

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import HeaderFooter from './HeaderFooter';
import Login from './Login';

const App = () => (
  <Router>
    <HeaderFooter />
    <Switch>
      <Route path="/login" component={Login} />
      {/* 其他路由 */}
    </Switch>
  </Router>
);

export default App;