使用Vue-Router路由信息生成页眉

// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Header from './components/Header.vue';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'home',
    components: {
      header: Header,
      default: Home
    }
  },
  {
    path: '/about',
    name: 'about',
    components: {
      header: Header,
      default: About
    }
  }
];

const router = new VueRouter({
  routes
});

export default router;

<!-- App.vue -->
<template>
  <div>
    <header>
      <router-view name="header"></router-view>
    </header>
    <router-view></router-view>
  </div>
</template>

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

// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';

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