vue 名命视图

名命视图

在大多数组件中需要有header组件就可以这样写，减少header的引入  <router-view name="header" />    在配置中就可以控制显示隐藏。

　　

1）在所有的组件中加入 <router-view name="header" />

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

2）在router文件夹下的index.js中配置

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta:{
      isShowNav:true
    }，
    //通过在children中的components控制Header的显示隐藏
          children:[
           	path:"/",
                components:{
                       //根据需要加入Header组件，如果不需要的就不用加下边这行代码，这样就实现了控制是否显示Header组件
                        header:Header
                   }
             ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router