基于vue的spa网站，部分页面头部尾部不固定

Question

用vue做spa网站，但某些页面不需要头部和尾部，或者头部略微有差别，比如点击登录，就不需要头部和导航栏。这时该怎么办呢？有个方法是把头部跟尾部做成组件，需要的页面再导入这两个组件，但感觉代码量多了。除此之外还有别的方法么

Answer 1

可以参考楼上的命名视图做，我给你发一段router的配置，你一看就懂routes: [&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; path: '/login',&nbsp; &nbsp; &nbsp; name: 'login',&nbsp; &nbsp; &nbsp; meta: {auth: false, title: '登录'},&nbsp; &nbsp; &nbsp; component: Login&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; path: '/',&nbsp; &nbsp; &nbsp; meta: {title: '首页', active: 1},&nbsp; &nbsp; &nbsp; component: resolve => require(['../pages/main'], resolve),&nbsp; &nbsp; &nbsp; children: [&nbsp; &nbsp; &nbsp; &nbsp; erp,&nbsp; &nbsp; &nbsp; &nbsp; crm,&nbsp; &nbsp; &nbsp; &nbsp; ...}]main.vue<template>&nbsp; <el-row class="container">&nbsp; &nbsp; <el-col :span="24" class="header">&nbsp; &nbsp; &nbsp; <router-view name="top"></router-view>&nbsp; &nbsp; </el-col>&nbsp; &nbsp; <el-col :span="24" class="main">&nbsp; &nbsp; &nbsp; <aside>&nbsp; &nbsp; &nbsp; &nbsp; <router-view name="left"></router-view>&nbsp; &nbsp; &nbsp; </aside>&nbsp; &nbsp; &nbsp; <section class="content-container">&nbsp; &nbsp; &nbsp; &nbsp; <transition name="fade">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <router-view keep-alive></router-view>&nbsp; &nbsp; &nbsp; &nbsp; </transition>&nbsp; &nbsp; &nbsp; </section>&nbsp; &nbsp; </el-col>&nbsp; </el-row></template>