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

问题描述

问 题

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

解决方案

可以参考楼上的命名视图做，
我给你发一段router的配置，你一看就懂

routes: [
    {
      path: '/login',
      name: 'login',
      meta: {auth: false, title: '登录'},
      component: Login
    },
    {
      path: '/',
      meta: {title: '首页', active: 1},
      component: resolve => require(['../pages/main'], resolve),
      children: [
        erp,
        crm,
        ...
}]

main.vue

<template>
  <el-row class="container">
    <el-col :span="24" class="header">
      <router-view name="top"></router-view>
    </el-col>
    <el-col :span="24" class="main">
      <aside>
        <router-view name="left"></router-view>
      </aside>
      <section class="content-container">
        <transition name="fade">
          <router-view keep-alive></router-view>
        </transition>
      </section>
    </el-col>
  </el-row>
</template>

这篇关于javascript - 基于vue的spa网站，部分页面头部尾部不固定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！