vue纯前端设计动态路由+页面架构

最新推荐文章于 2025-05-30 14:54:42 发布

原创

最新推荐文章于 2025-05-30 14:54:42 发布 · 3.3k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了如何使用Vue脚手架和Ant Design来构建一个后台管理系统的页面结构，包括App.vue和Layout.vue的配置，以及路由设计。通过示例代码展示了头部导航、左侧菜单和页面标签的实现，提供了从头部导航切换时动态更新页面内容的方法。

前言

好久没有更新博客了，今天就写一下vue脚手架+antd如何架构一个后台管理系统页面，本来是想弄微前端的但是想想还是算了，不过你熟了的话，可以使用微前端进行架构，基于主体布局不变嵌入微前端。

上图

还行，不过有很多细节没有处理好。不过作为一个参考模型是足够了，我的写偏向简单，看一遍就会了

开始

这里我就主要讲两块（页面架构、路由设计）

App.vue

ps：这里添加一个路由组件(一级页面需要)

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

<script>
export default {
  name: 'App',
  data() {
    return {
      
    }
  },
  mounted() {
    
  },
  created() {
   
  },
  methods: {
    
  }
}
</script>

<style>

</style>

layout.vue

ps：在tab标签下添加一个路由组件（二级页面需要）

<template>
  <div>
      <a-layout id="components-layout-demo-top-side">
        <!-- 头部页 -->
        <a-layout-header class="header">
          <div class="logo" />
          <a-menu
            theme="dark"
            mode="horizontal"
            :default-selected-keys="headerSelectMenu"
            :style="{ lineHeight: '64px' }"
            @click="changHeaderMenu"
          >
            <a-menu-item v-for="item in headerMenu" :key="item['id']">
              {
  
  {item.name}}
            </a-menu-item>
          </a-menu>
        </a-layout-header>
        <!-- 主体页 -->
        <a-layout-content style="padding: 0 50px">
          <!-- 面包屑 -->
          <!-- <a-breadcrumb style="margin: 16px 0">
            <a-breadcrumb-item>首页</a-breadcrumb-item>
            <a-breadcrumb-item>测试</a-breadcrumb-item>
            <a-breadcrumb-item>测试页</a-breadcrumb-item>
          </a-breadcrumb> -->
          <!-- 左边导航栏 -->
          <a-layout style="padding: 24px 0; background: #fff">
            <a-layout-sider width="200" style="background: #fff">
              <!-- :default-open-keys="leftOpenSelectMenu" -->
              <!-- :default-selected-keys="leftSelectMenu" -->
              <a-menu
                mode="inline"
                style="height: 100%"
                :default-open-keys="leftOpenSelectMenu" 
                :default-selected-keys="leftSelectMenu"
                @click="changLeftMenu"
              >
                <a-sub-menu v-for="leftItem in leftMenu" :key="leftItem['id']">
                  <span slot="title"><a-icon type="user" />{
  
  {leftItem['name']}}</span>
                  <a-menu-item v-for="leftCholdrenItem in leftItem['children']" :key="leftCholdrenItem['id']">
                    {
  
  {leftCholdrenItem['name']}}
                  </a-