vue开发管理系统侧边栏和主题内容的跳转

最新推荐文章于 2023-02-26 18:31:57 发布

A_Qyp

最新推荐文章于 2023-02-26 18:31:57 发布

阅读量1.7k

点赞数 8

分类专栏： Vue 文章标签： vue web

本文链接：https://blog.csdn.net/qyp_1/article/details/106351687

版权

Vue 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

前言

这篇博客为大家讲解的是我们常见的或者常用的一些管理系统或操作系统的侧边栏与页面内容交互的一个效果，这种效果的实现思路是通过Layout来创建一个区域，这个区域中来进行router的跳转。

先在src文件下创建一个views的文件夹（做项目必创建），然后在里面创建我们的总体文件layout.vue
还是在views文件下创建我们的侧边栏文件sidebar 在里面写入（要提前引入element）

<template>
  <div>
    <div class="box">
      <el-row class="tac">
        <el-col :span="24" class="tac1">
          <el-menu
            default-active="1-1"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>一级菜单</span>
              </template>
              <el-menu-item-group>
                <router-link to="/Home">
                  <el-menu-item index="1-1">选项1</el-menu-item>
                </router-link>
                <router-link to="/two">
                  <el-menu-item index="1-2">选项2</el-menu-item>
                </router-link>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style scoped>
a {
  text-decoration: none;
}

.tac1 {
  text-align: left;
  height: 100vh;
  background: rgb(84, 92, 100);
}
.tac {
  width: 210px;
}
</style>

在layout.vue文件中写入

<template>
  <div>
    <div class="box">
      <sidebar></sidebar>
      <router-view />  //加这个才能实行文件局部的router改动
    </div>
  </div>
</template>
<script>
import sidebar from './sidebar'
export default {
    components:{
        sidebar
    }
};
</script>
<style scoped>
a {
  text-decoration: none;
}
.box {
  display: flex;
}
</style>

在views文件下创建两个文件 home.vue two.vue
home.vue写入

<template>
    <div>
        <h1>第一个第一个第一个</h1>
    </div>
</template>

two.vue写入

<template>
    <div>
        <h1>第二个第二个第二个</h1>
    </div>
</template>

最终的结构图片
在router文件中的index中写入

	import Layout from '../views/layout.vue'  //写在顶部

	//写在路由配置的里面
	{ path: '*', redirect: '/home' },
    {
        path: '/',
        name: 'home',
        redirect: '/home',
        component: Layout, // 导入组件 Layout
        hidden: true,
        children: [
            {
                path: '/home',
                component: () => import('@/views/Home.vue')
            },
            {
                path: '/two',
                component: () => import('@/views/two.vue')
            }
        ]
    }