vue-router 的命名视图的使用

矫情吗；* 2022-05-19 12:29 159阅读 0赞

在开发中我们经常会遇到这种情况，就是有个项目的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中，

注意不需要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)就可以啦