Vue命名视图

首先放上官方链接：https://router.vuejs.org/zh/guide/essentials/named-views.html.

命名视图简单来说就是在一个页面同时使用多个组件，多个视图同时存在一个路径之中，这时候就需要多写几个router-view了，把不同的router-view设置不同的name，在index.js中设置name对应的组件以及路径。

//index.js文件

import Index from '@/components/Index'
import LoginHeader from '@/components/LoginHeader'
export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'login',
      components: {
        header: LoginHeader, //这里设置 name：组件名
        main: Index
      }
    }
  ]
})

//APP.vue
<template>
  <div id="app">
    <router-view name="header"></router-view>
    <router-view name="main"></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}

APP.vue中只要写入router-view就可以了，这样在路径/中视图中出现的就是这两个组件了。
Vue小白，刚刚接触，如果有错误请大佬提出，我马上改正。