30、vue-router 的命名视图的使用

在开发中我们经常会遇到这种情况，就是有个项目的header是公用的，在各个页面中都会使用到，所以我们会将其设置为一个公共组件，然后在各个页面中引用，但是每个页面都去引用真是太麻烦了，所以在Vue中注册引用，这样就会在所有的页面中都有header了

例子：

效果：

//App.vue
<template lang="html">
  <div id="app">
    <app-header></app-header>
    <transition name="router-fade">
      <router-view></router-view>
    </transition>
    <app-footer></app-footer>
  </div>
</template>
<script>
import AppHeader from '@/components/Head.vue'
import AppFooter from '@/components/Footer.vue'
export default {
  components: {
    AppHeader,
    AppFooter
  }
}
</script>

//Cont.vue
<template lang="html">
  <div  style="padding:20px;">
  主体内容
  </div>
</template>

//Head.vue
<template lang="html">
  <div  style="padding:20px;">
  Head
  </div>
</template>

//Login.vue
<template lang="html">
  <div style="padding:20px;">
  login
  </div>
</template>

//Footer.vue
<template lang="html">
  <div  style="padding:20px;">
  Footer
  </div>
</template>

//router index.js
import Vue from 'vue';
import Router from 'vue-router';
import Cont from '@/components/Cont';
import Login from '@/components/Login'
Vue.use(Router);
var routes=[
    {
        path:'/',
        component:Cont
    },{
        path:'/login',
        component:Login 
    },
];
const routers=new Router({
    mode:'hash',
    routes:routes
});
export default routers;

但是这样的话会在所有的页面都有header头部，事实上有一些页面是没有header的，例如登录页面，注册页面等等。那我们该怎么办呢
效果：

这个时候我们就可以使用view-router命名视图了
命名视图是什么么？

官网是这么解释的：

有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航）和 main（主内容）两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default

如何使用呢？
现在我们拥有一个公共头部叫mainHead，我们在其他组件中引用，在App.vue中，

<template lang="html">
  <div id="app">
    <router-view name='mainHead'></router-view>
    <transition name="router-fade">
      <router-view></router-view>
    </transition>
    <app-footer></app-footer>
  </div>
</template>

<script>
import AppFooter from '@/components/Footer'
export default {
  components: {
    AppFooter
  }
}
</script>

注意不需要import mainHead组件
然后在配置路由index.js中引入import AppHead from '@/components/Head' 中
在路由配置项：

    {
        path:'/',
        components:{
            default:Cont,
            mainHead:AppHead
        },
        
    }

注意:是components 而不是component ，在需要使用头部的文件中写入mainHead(App.vue的view-router的name)就可以啦

最后编辑于：2019.04.24 11:38:52