首页 > 其他分享 >第十三篇 - 写一个侧边栏导航页面

第十三篇 - 写一个侧边栏导航页面

时间：2023-07-13 11:55:17浏览次数：41  
标签：vue 侧边 height Code import 十三篇 View border 页面

参考链接：https://github.com/newbee-ltd/vue3-admin

今天创建一个侧边栏导航页面，上一节并没有写NavigationTest.vue的功能，今天来丰富它。

今天想实现的侧边栏是

 

点击Home，右侧显示Home的内容，点击About，右侧显示About的内容。

首先我们看一下布局如何

 看这个布局，就可以发现，侧边栏是NavigationTest.vue，头部区域是HeaderTest.vue，底部区域是Footer.vue，中间主体区域是其他跳转页面，因为此次写Home和About，所以会有HomeTest.vue和AboutTest.vue，总计新增4个页面

 首先我们将这四个页面写完。

NavigationTest.vue

<template>
  <div class="layout">
    <el-container class="container">
      <el-aside class="aside">
        <div class="head">
          <div>
            <span>vue3 admin</span>
          </div>
        </div>
        <div class="line" />
        <el-menu
            background-color="#222832"
            text-color="#fff"
            :router="true"
            :default-openeds="state.defaultOpen"
            :default-active='state.currentPath'
        >
          <el-sub-menu index="1">
            <template #title>
              <span>目录1</span>
            </template>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <span>目录2</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/HomeTest">Home</el-menu-item>
              <el-menu-item index="/AboutTest">About</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container class="content">
        <HeaderTest />
        <div class="main">
          <router-view />
        </div>
        <FooterTest />
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import HeaderTest from "@/views/HeaderTest.vue"
import FooterTest from "@/views/FooterTest.vue"

const noMenu = ['/LoginPage']
const router = useRouter()
const state = reactive({
  showMenu: true,
  defaultOpen: ['1', '2', '3', '4'],
  currentPath: '/',
})

router.afterEach((to) => {
  state.showMenu = !noMenu.includes(to.path)
})

router.beforeEach((to) => {
  state.currentPath = to.path
  document.title = to.name
})
</script>

<style scoped>
.layout {
  min-height: 100vh;
  background-color: #ffffff;
}
.container {
  height: 100vh;
}
.aside {
  width: 200px!important;
  background-color: #222832;
}
.head {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
}
.head > div {
  display: flex;
  align-items: center;
}

.head img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}
.head span {
  font-size: 20px;
  color: #ffffff;
}
.line {
  border-top: 1px solid hsla(0,0%,100%,.05);
  border-bottom: 1px solid rgba(0,0,0,.2);
}
.content {
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  overflow: hidden;
}
.main {
  height: calc(100vh - 100px);
  overflow: auto;
  padding: 10px;
}
</style>

<style>
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.el-menu {
  border-right: none!important;
}
.el-submenu {
  border-top: 1px solid hsla(0, 0%, 100%, .05);
  border-bottom: 1px solid rgba(0, 0, 0, .2);
}
.el-submenu:first-child {
  border-top: none;
}
.el-submenu [class^="el-icon-"] {
  vertical-align: -1px!important;
}
a {
  color: #409eff;
  text-decoration: none;
}
.el-pagination {
  text-align: center;
  margin-top: 20px;
}
.el-popper__arrow {
  display: none;
}
</style>
View Code

 

HeaderTest.vue

<script setup>

</script>

<template>
  <h1>首页</h1>
</template>

<style scoped>

</style>
View Code

 

FooterTest.vue

<script>
export default {
  data () {
  }
}

</script>

<template>
  <div>copyright@</div>
</template>

<style scoped>

</style>
View Code

 

HomeTest.vue

<!--/src/views/home.vue-->
<template><h1>Home Page</h1>
  <p> {{ pageData }} </p></template>
<script>
export default {
  data () {
    return {
      // 数据绑定对象
      pageData: 'Welcome to home page'
      }
    }
}

</script>
View Code

 

AboutTest.vue

<!--/src/views/home.vue-->
<template><h1>About Page</h1>
  <p> {{ pageData }} </p></template>
<script>
export default {
  data () {
    return {
      // 数据绑定对象
      pageData: 'Welcome to About page'
    }
  }
}

</script>
View Code

 

接下来去更新路由routes.js

import LoginPage from '@/views/LoginPage.vue'
import JumpTest from '@/views/JumpTest.vue'
import HomeTest from '@/views/HomeTest.vue'
import AboutTest from "@/views/AboutTest.vue";

const routes = [
    {
        name: 'LoginPage',
        path: '/',
        component: LoginPage
    },
    {
        name: '/JumpTest',
        path: '/JumpTest',
        redirect: '/HomeTest',
        component: JumpTest,
        children: [
            {path: '/HomeTest', name: 'HomeTest', component: HomeTest},
            {path: '/AboutTest', name: 'AboutTest', component: AboutTest}
        ]
    }
];
export default routes
View Code

 

为了使代码完整，将其他几个文件也贴出来吧

LoginPage.vue

/* eslint-disable */
<template>
  <div class="login_container">
    <div class="login_box">
      <div class="wai">
        <!-- 头像区域 -->
        <div class="avatar_box">
          <img src="../assets/head.png" alt="" />
        </div>
        <!-- 登录表单区域 -->
        <el-form
            ref="loginFormRef"
            :model="loginForm"
            :rules="loginFormRules"
            label-width="0px"
            class="login_form"
        >
          <!--        用户名-->
          <el-form-item prop="username">
            <label class="form-label">用户名</label>
            <el-input
                v-model="loginForm.username"
                prefix-icon="User"
            ></el-input>
          </el-form-item>
          <!--        密码-->
          <el-form-item prop="password">
            <label class="form-label">密码</label>
            <el-input
                v-model="loginForm.password"
                prefix-icon="Key"
                type="password"
            ></el-input>
          </el-form-item>
          <!--        按钮区域-->
          <el-form-item class="btns">
            <el-button type="primary" @click="Login">登录</el-button>
            <el-button type="info" @click="resetLoginForm">重置</el-button>
          </el-form-item>
          <div style="display:flex; justify-content:flex-start">{{loginForm.message}}</div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.login_container {
  background-color: darkcyan;
  height: 100%;
}

.login_box {
  width: 350px;
  height: 300px;
  background-color: white;
  border-radius: 15px;
  /*容器内居中*/
  position: absolute;
  left: 40%;
  top: 50%;
  transform: translate(-50%, -50%);

  .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    /*边框阴影*/
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #993d3d;
    }
  }

  .login_form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .btns {
    display: flex;
    justify-content: flex-end;
  }
  .wai {
    background-image: url("../assets/back.jpg");
    width: 577px;
    height: 300px;
    border-radius: 15px;
  }
}
</style>

<script>
import qs from 'qs'

export default {
  name: 'LoginPage',
  data () {
    return {
      // 数据绑定对象
      loginForm: {
        username: 'lili',
        password: '123',
        message: ''
      },
      loginFormRules: {
        // 验证用户
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {
            min: 3,
            max: 10,
            message: '长度在3到10个字符',
            trigger: 'blur'
          }
        ],
        password: [
          {required: true, message: '请输入登录密码', trigger: 'blur'},
          {
            min: 3,
            max: 15,
            message: '长度在3到15个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    Login () {
      /* http://localhost:8081/api/login */
      this.$axios
          .post('http://localhost:8081/api/login', qs.stringify(this.loginForm))
          .then(successResponse => {
            console.log(successResponse.data)
            if (successResponse.data.code !== 200) {
              this.loginForm.message = successResponse.data.message
            } else {
              console.log('登录成功')
              this.$router.push({path: '/JumpTest'})
            }
          })
          .catch(failResponse => {
            console.log('12345566')
            console.log(failResponse)
          })
    },
    // // 重置登录表单
    resetLoginForm () {
      this.$refs.loginFormRef.resetFields()
    }
  }
}
</script>
View Code

 

JumpTest.vue

/* eslint-disable */
<template>
  <NavigationTest></NavigationTest>
</template>
<script>

import NavigationTest from "@/views/NavigationTest.vue";

export default {
  name: 'JumpTest',
  components: {
    NavigationTest
  }
}

</script>
<style scoped>

</style>
View Code

 

App.vue

<template>
  <router-view/>
</template>

<script>

export default {
  name: 'App',
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
View Code

 

main.js

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import './assets/css/global.css'
import axios from 'axios'
// 统一导入el-icon图标
import * as ElIconModules from '@element-plus/icons-vue'
import router  from "./router/index"

const app = createApp(App)

app.config.productionTip = false
app.config.globalProperties.$axios = axios

for (let iconName in ElIconModules) {
    app.component(iconName, ElIconModules[iconName])
}

app.use(router)
app.use(ElementPlus)
app.mount('#app')
View Code

 

运行程序试试npm run serve

 

标签：vue,侧边,height,Code,import,十三篇,View,border,页面
From： https://www.cnblogs.com/smart-zihan/p/17550068.html

相关文章

  • Vue无感刷新当前页面
    使用Vue选项/组合Apiprovide/inject Api地址，此方法可以实现无感刷新并且不会出现闪烁的空白。首先在根组件App.vue定义这个方法 html复制代码<template><divid="app"><router-viewv-if="routerAlive"></router-view></div><......
  • 如何解决使用 router.push 跳转路由第二次之后页面就不会刷新了
    router.push({name:"monitor",query:{deviceid:"1676156672197922816",//设备IDisOpen:"true",//是否跳转事件date:newDate().getTime()//解决第二次使用push跳转路由页面不刷新}})在传递参数的时候加上 date:......
  • EasyCVR平台开启强制重置密码后页面显示异常的问题优化
    EasyCVR平台基于云边端协同架构，可支持多协议、多类型的海量设备接入与分发，平台既具备传统安防视频监控的能力，也具备接入AI智能分析的能力，在线下均有大量应用。近期我们对EasyCVR平台的安全性进行了技术升级，平台将默认开启强密码功能。有用户反馈，开启强制重置密码功能后显示异常，......
  • [GPT] 对于一个复杂的html文档而言，如何用 js 批量替换页面上的某些文字从A替换为B，前提
     原生：示例代码functionreplaceTextInDocument(node){if(node.nodeType===Node.TEXT_NODE){node.textContent=node.textContent.replace(/A/g,'B');}elseif(node.nodeType===Node.ELEMENT_NODE){for(vari=0;i<node.childNode......
  • 微信小程序获取页面数据的几种方式记录
    获取页面数据有以下几种方式：使用data属性：在页面的data属性中定义数据，在页面的生命周期函数或其他函数中可以直接通过this.data来获取数据。使用setData方法：通过setData方法可以更新页面的数据，可以在页面的生命周期函数或其他函数中调用setData方法来更新数据。使用事件绑定：可以在wx......
  • SpringBoot全局异常处理，返回数据附带http状态码，以及捕获404页面异常
    SpringBoot全局异常处理，返回数据附带http状态码，以及捕获404页面异常前言全局异常处理对于编写网络接口程序来说至关重要，能省掉很多的判断语句，让逻辑更加清晰。springboot中的全局异常处理并不难。与网上大部分文章不同的是，我用springboot自带的ResponseEntity给返回结果加上了了......
  • Vue路由新开页面跳转和传参传递
    需求：在后台管理系统首页列表项中，点击详情跳转到系统中指定菜单的路由要求新开窗口并需要带上参数查询。第一种方法：1const{id}=item;2letrouteUrl=this.$router.resolve({3path:'/xxx',//路由地址4query:{id}//参数信息5});6window.open(ro......
  • 6. Q_ 如果你有一个搜索结果页面，你想高亮搜索的关键词。什么HTML 标签可以使用_
    Q:如果你有一个搜索结果页面，你想高亮搜索的关键词。什么HTML标签可以使用?A:<mark>标签表现高亮文本。TheHTML<mark>Elementrepresentshighlightedtext,i.e.,arunoftextmarkedforreferencepurpose,duetoitsrelevanceinaparticularcontext.Forexa......
  • 利用xlsx库导出页面表格为xlsx文件
    html<el-tableid="table"></el-table>jsimport*asXLSXfrom'xlsx'/** *导出表格为xlsx文件 *@param{string}id表格dom的id*/asyncfunctionexportTable(id,fileName){letwb=XLSX.utils.table_to_book(document.getEleme......
  • 前端Vue仿京东淘宝我的优惠券列表组件 用于电商我的优惠券列表页面
    随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99