后台管理系统模板

上效果图，这里是首页

注意url的地址

上图是进入之后的页面

废话不多说，直接上代码

文件位置 router >>>>> index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path:'/',
      name:'/arr',
      component: () => import('../page/arr')
    },
    {
      path: '/',
      name:'layout',
      component: () => import('../page/layout'),
      // 嵌套路由
      children: [
        {
          path: '/', 
          name: 'PersonalCenter',
          component: () => import('../page/PersonalCenter')
        },
        {
          path: '/PersonalCenter', 
          name: 'PersonalCenter',
          component: () => import('../page/PersonalCenter')
        },
        {
          path: '/scaleMaintenance', 
          name: 'scaleMaintenance',
          component: () => import('../page/scaleMaintenance')
          },
        {
          path: '/startTest', 
          name: 'startTest',
          component: () => import('../page/startTest')
        },
        {
          path: '/statistical', 
          name: 'statistical',
          component: () => import('../page/statistical')
        },
        {
          path: '/answerNum', 
          name: 'answerNum',
          component: () => import('../page/answerNum')
        },
        
       
      ]
    },
  ]
})

//解决问题：重复点击导航时，控制台出现报错 ，虽然不影响功能使用，但也不能视而不见。
const VueRouterPush = Router.prototype.push
Router.prototype.push = function push (to) {
  return VueRouterPush.call(this, to).catch(err => err)
}

这里就是进入的主页了

<template>
  <div class="main-page">
    <h1>欢迎进入后台管理系统之路由跳转</h1>&nbsp;&nbsp;&nbsp;&nbsp;
    <el-button @click="PersonalCenter">跳转</el-button>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    PersonalCenter() {
      this.$router.push({
        path: "/PersonalCenter",
      });
    },
  },
};
</script>
<style lang="less" scoped>
html,
body {
  width: 100%;
  height: 100%;
}
.main-page {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

接下来就是跳转之后的页面，这就是左边栏的代码和样式，是根据element-ui来制作的

<template>
  <div class="main-page">
    <el-container>
      <el-header>
        <div class="pageTitle">后台管理系统之路由跳转</div>
      </el-header>
      <el-container>
        <el-aside width="250px">
          <el-menu
            class="el-menu-vertical-demo"
            default-active="1"
            background-color="#324157"
            text-color="#bfcbd9"
            active-text-color="#ffd04b"
            unique-opened
          >
            <el-menu-item index="1" @click="PersonalCenter()">
              <i class="el-icon-setting"></i>
              <span slot="title">个人中心</span>
            </el-menu-item>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>个人订单</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="2-1" @click="scaleMaintenance()"
                  >选项1</el-menu-item
                >
                <el-menu-item index="2-2" @click="clickTest()"
                  >选项1</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>商品分类</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="3-1" @click="statistical()"
                  >选项1</el-menu-item
                >
                <el-menu-item index="3-2" @click="answerNum()"
                  >选项1</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main><router-view /></el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    scaleMaintenance() {
      this.$router.push({
        path: `/scaleMaintenance`,
      });
    },
    clickTest(id, name) {
      this.$router.push({
        // path: `/home/${id}/${name}`
        path: `/startTest`,
      });
    },
    statistical() {
      this.$router.push({
        path: `/statistical`,
      });
    },
    answerNum() {
      this.$router.push({
        path: `/answerNum`,
      });
    },
    add() {
      this.$router.push({
        path: `/add`,
      });
    },
    PersonalCenter() {
      this.$router.push({
        path: `/PersonalCenter`,
      });
    },
  },
};
</script>
<style lang="less" scoped>
.main-page {
  .pageTitle {
    float: left;
    width: 300px;
    height: 70px;
    line-height: 70px;
    font-size: 25px;
  }
  .pageTitle:hover {
    cursor: pointer;
  }
  .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-header {
    background-color: #545c64;
    color: #fff;
    text-align: center;
    line-height: 60px;
    .title {
      float: left;
      width: 250px;
      height: 70px;
      line-height: 70px;
      font-size: 25px;
    }
    .addRoll {
      float: right;
      width: 250px;
    }
  }

  .el-select {
    margin-top: 20px;
  }
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
  }

  .el-main {
    background-color: #fff;
  }

  .el-container {
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0;
    bottom: 0;
  }
  .el-header {
    padding: 0;
    z-index: 1000;
  }

  .el-header .el-menu {
    border-bottom: none;
  }
  .el-aside,
  .el-main {
    padding-top: 60px;
  }
  .el-aside {
    background: #324157;
  }
  .el-aside .el-menu {
    border-right: none;
  }
}
</style>

上面可能有些样式是不需要的，如介意的话可以自行删除

接下来就是左边栏的每个文件的配置，这是个一级菜单

<template>
  <div class="main-page">
    <h1>个人中心</h1>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style lang="less" scoped>
html,
body {
  width: 100%;
  height: 100%;
}
.main-page {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
h1 {
  font-size: 50px;
}
</style>

这里是二级菜单的页面，后面的二级菜单直接copy就可以了，

<template>
  <div class="main-page">
    <h1>首页</h1>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style lang="less" scoped>
html,
body {
  width: 100%;
  height: 100%;
}
.main-page {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
h1 {
  font-size: 50px;
}
</style>

最后给大家看的就是项目的文件存放位置

如果有什么地方做的不好的话，还请多多指点，大家一起学习 (๑╹◡╹)ﾉ"