vue-router - vue 如何配置多页面不同的头部

问题描述

问 题

该项目一共有6个页面，分别是登录、注册、列表、详情、A分类列表、B分类列表。

需求：

1. 列表、详情、A分类列表、B分类列表，公用一个头部

2. 注册、登录则不需要头部。

app.vue配置图

vue-router 配置图

如果注册和登录不需要头部的话，在路由这控制，还是在4个页面分别添加头部，如果是分别添加头部，这个公用就没有意义了。

解决方案

可以使用命名视图:

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

 routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    },
    {
      path: '/list',
      name: 'List',
      components: {
        default: List,
        header: Header
      }
    }
   ]

vue-router命名视图的意义

这篇关于vue-router - vue 如何配置多页面不同的头部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！