vue-router 的命名视图的使用

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

<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/header/Header.vue'
import AppFooter from './components/footer/Footer.vue'
export default {
  components: {
    AppHeader,
    AppFooter
  }
}
</script>

但是这样的话会在所有的页面都有header头部，事实上有一些页面是没有header的，例如登录页面，注册页面等等。那我们该怎么办呢
这个时候我们就可以使用view-router命名视图了
命名视图是什么么？

官网是这么解释的：

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

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

<template>
  <div id="app">
    <router-view name='mainheader'></router-view>
    <router-view/>
  </div>
</template>

注意不需要import mainheader组件
然后在配置路由index.js中引入import MainHeader from '@/pages/mainheader' 中
在路由配置项：

{
    path: '/home',
    name: 'Home',
    components: {
      default: Home,
      mainheader: MainHeader
    }
  }

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

vue-router 的命名视图的使用

猜你喜欢