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

前言

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

1. 先在src文件下创建一个views的文件夹（做项目必创建），然后在里面创建我们的总体文件layout.vue
2. 还是在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>

3. 在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>

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

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

two.vue写入

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

5. 最终的结构图片
   
6. 在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')
            }
        ]
    }

7. 最终效果
   
   

结语

这种方法在开发时特别的好用，屡试屡爽，如果此文章对你有所帮助的话，可以素质三连来一下