【vue学习】权限管理系统前端实现6-主页面布局

墨蓝 2024-04-20 22:11 94阅读 0赞

## 1.新建layout文件夹 新建index.vue 添加router ##

![fbea97f34715449693287d9d2cb4f717.png][]

const routes = [
      {
        path: '/',
        name: '首页',
        component: () => import('../layout')
      },

## 2.登录添加跳转 ##

loginRef.value.validate(async (valid)=>{
          if(valid){
            try{
              let result=await requestUtil.post("login?"+qs.stringify(loginForm.value))
              let data=result.data;
              if(data.code==200){
                const token = data.authorization;
                store.commit('SET_TOKEN',token);
                rounter.replace("/")
              }else{
                ElMessage.error(data.msg)
              }
            }catch(error){
              console.log("error:"+error);
              ElMessage.error("服务器出错，请联系管理员！")
            }
          }else{
            console.log("验证失败")
          }
        })

## 3.最终效果![d7605486ae5d4c0b89cddac031ada09e.png][] ##

## 4.新建结构 ##

![107bb76f7dc5461aad39718976dfb22e.png][]

## 5.主页面index.vue ##

<template>
      <div class="app-wrapper">
        <el-container>
          <el-aside width="200px" class="sidebar-container"><Menu/></el-aside>
          <el-container>
            <el-header><Header/></el-header>
            <el-main><Tabs/></el-main>
            <el-footer><Footer/></el-footer>
          </el-container>
        </el-container>
      </div>
    </template>
    
    <script setup>
    import Menu from '@/layout/menu'
    import Header from '@/layout/header'
    import Footer from '@/layout/foot'
    import Tabs from '@/layout/tabs'
    </script>
    
    <style lang="scss" scoped>
    
    .app-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
    }
    
    .sidebar-container {
      background-color: #2d3a4b;
      height: 100%;
    }
    
    //修改原有样式
    .el-container{
      height:100%
    }
    
    .el-header{
      padding-left: 0px;
      padding-right: 0px;
    }
    
    //深度选择器
    :deep(ul.el-menu){
      border-right-width: 0px
    }
    
    
    </style>

## 6.foot ##

<template>
      <div class="footer">
        Copyright © 2012-2022 xxx 版权所有  <a href="xxx" target="_blank">xxx</a>
      </div>
    </template>
    
    <script setup>
    
    </script>
    
    <style lang="scss" scoped>
    .footer{
      padding: 20px;
      display: flex;
      align-items: center;
    }
    </style>

## 7.tabs ##

<template>
      <div style="margin-bottom: 20px">
        <el-button size="small" @click="addTab(editableTabsValue)">
          add tab
        </el-button>
      </div>
      <el-tabs
          v-model="editableTabsValue"
          type="card"
          class="demo-tabs"
          closable
          @tab-remove="removeTab"
      >
        <el-tab-pane
            v-for="item in editableTabs"
            :key="item.name"
            :label="item.title"
            :name="item.name"
        >
          {
       { item.content }}
        </el-tab-pane>
      </el-tabs>
    </template>
    <script  setup>
    import { ref } from 'vue'
    
    let tabIndex = 2
    const editableTabsValue = ref('2')
    const editableTabs = ref([
      {
        title: 'Tab 1',
        name: '1',
        content: 'Tab 1 content',
      },
      {
        title: 'Tab 2',
        name: '2',
        content: 'Tab 2 content',
      },
    ])
    
    const addTab = (targetName) => {
      const newTabName = `${++tabIndex}`
      editableTabs.value.push({
        title: 'New Tab',
        name: newTabName,
        content: 'New Tab content',
      })
      editableTabsValue.value = newTabName
    }
    const removeTab = (targetName) => {
      const tabs = editableTabs.value
      let activeName = editableTabsValue.value
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            const nextTab = tabs[index + 1] || tabs[index - 1]
            if (nextTab) {
              activeName = nextTab.name
            }
          }
        })
      }
    
      editableTabsValue.value = activeName
      editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
    }
    </script>
    <style>
    .demo-tabs > .el-tabs__content {
      padding: 32px;
      color: #6b778c;
      font-size: 32px;
      font-weight: 600;
    }
    </style>

[fbea97f34715449693287d9d2cb4f717.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/2588361ad9c148f28bf176d1755c4868.png
[d7605486ae5d4c0b89cddac031ada09e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/d2a94dee05c64331b0097419dcdf0d39.png
[107bb76f7dc5461aad39718976dfb22e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/acb28a9053944eea946673b838f552ca.png