Question

在SPA中，我制作了一个标题组件，每个页面都会略有变化。

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组件注入所有路由的正确方法是什么？

更新：当我尝试将标头组件导入应用的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

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

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

否则：

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


]

如何在所有vue路由中包含组件？

1 个答案: