如何在所有 vue-routes 中包含一个组件？

Question

在 SPA 中，我制作了一个 header 组件，它在每个页面上都略有变化。

export default {
  name: 'header',
  //add some stuff based on user data
  data: function (router) {
    return {
      //some data      
    }
  },   
}

这是我的路线：

export default [
  {path:'/', component: showJokesAll },
  {path:'/hot', component: showJokesHotAll },
  {path:'/add', component: addJoke  }  ,
  {path: '/login', component: webLogin},
  {path: '/profile', component: webProfile},
  {path: '/auth', component: webProfile},

]

我想知道将 header 组件注入所有路由的正确方法是什么？

更新：当我尝试将 header 组件导入应用程序的 main.js:

import Header from './components/header.vue'

Vue.component('page-header', Header);

我收到这个错误：

Failed to mount component: template or render function not defined.

Answer 1

如果您想在所有路线中使用相同的 header 组件。将其放在 router-view 之前并更改 css 布局。如果您不想根据每条路线更改 header 组件的内容。您可以在 header 组件中放置另一个 <router-view name="header">。然后在你的路线数组中

 <template> 
        <div> 
          <app-header><../>
          <router-view><../>
        </div> 
    </template>

否则：

export default [
  {
     path:'/', 
     components: {
       default: defaultComponentForThisRoute,
       header: yourRouteHeaderComponent,
     } 
  },


]

如何在所有 vue-routes 中包含一个组件？

How to include a component in all vue-routes?

javascript

vue.js

vue-router