18-Vue路由

 

 

安装 vue-router 包

npm install vue-router@3.5.1

 

 

项目代码

链接: https://pan.baidu.com/s/1GCZq01FEnJxqrZX3yA0-Ng 提取码: jkam 复制这段内容后打开百度网盘手机App，操作更方便哦

layout.vue布局组件

<template>
  <el-container>
    <el-aside width="200px">
      <el-menu :default-openeds="['1','2','3']" default-active="/emp" router>
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-message"></i>班级学员管理</template>
          <el-menu-item index="/class">班级管理</el-menu-item>
          <el-menu-item index="/student">学员管理</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title"><i class="el-icon-menu"></i>系统信息管理</template>
          <el-menu-item  index="/dept">部门管理</el-menu-item>
          <el-menu-item index="/emp">员工管理</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title"><i class="el-icon-setting"></i>数据统计管理</template>
          <el-menu-item index="3-1">员工信息统计</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)">马铃薯智能学习辅助系统</el-header>
      </el-header>
      <el-main><router-view></router-view></el-main>
    </el-container>
  </el-container>
</template>

<script>
export default{
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Layout',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
}

</script>

<style>
.el-header{
  background-color: #b3c0d1;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-aside {
  width: auto;
  background-color: #304156;
  color: #333;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}

.el-container {
  height: 100vh;
}
</style>

index.js 通过router路由实现页面跳转

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [{
    path: "/",
    name: "home",
    component: () => import("@/components/layout.vue"),
    children:
        [{
            path: "/emp",
            name: "emp",
            component: () => import("@/views/tlias/EmpView.vue")
        },
        {
            path: "/dept",
            name: "dept",
            component: () => import("@/views/tlias/DeptView.vue")
        },
        {
            path: "/class",
            name: "class",
            component: () => import("@/views/tlias/ClassView.vue")
        },
        {
            path: "/student",
            name: "student",
            component: () => import("@/views/tlias/StudentView.vue")
        }]
}];


const router = new VueRouter({
    routes
});

export default router

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {

  },
  data() {
    return {
      msg: 'Welcome to Your Vue.js 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>

main.js 入口文件

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false
Vue.use(ElementUI);

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

EmpView.vue

<template>
  <div>
    <!-- 表单 -->
    <el-form :inline="true" :model="searchForm" class="demo-form-inline" align="left">
      <el-form-item label="姓名">
        <el-input v-model="searchForm.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="活动区域">
        <el-select v-model="searchForm.gender" placeholder="请选择性别">
          <el-option label="男" value="1"></el-option>
          <el-option label="女" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="入职日期">
          <el-date-picker
              v-model="searchForm.entrydate"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="onClear">清空</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="tableData" border>
      <el-table-column prop="name" label="姓名" width="200" align="center"></el-table-column>
      <el-table-column prop="image" label="图片" width="200" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.image" alt="" style="width: 100px; height: 100px;">
        </template>
      </el-table-column>
      <el-table-column prop="gender" label="性别" width="200" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.gender == 1">男</span>
          <span v-if="scope.row.gender == 2">女</span>
        </template>
      </el-table-column>
      <el-table-column prop="job" label="职位" width="200" align="center"></el-table-column>
      <el-table-column prop="entrydate" label="入职日期" width="300" align="center"></el-table-column>
      <el-table-column prop="updatetime" label="更新时间" width="300" align="center"></el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="edit(scope.row.id)">编辑</el-button>
          <el-button type="danger" size="mini" @click="del(scope.row.id)">删除</el-button>

          <!--<el-popconfirm title="确定删除吗？">-->
          <!--  <el-button slot="reference" type="danger" size="mini">删除</el-button>-->
          <!--</el-popconfirm>-->

        </template>
      </el-table-column>
    </el-table>

    <el-dialog
        title="编辑"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">

      <el-form :model="Form" label-width="80px" align="left">
        <el-form-item label="姓名">
          <el-input v-model="Form.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-input v-model="Form.image" placeholder="请输入图片地址"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="Form.gender" placeholder="请选择性别">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职位">
          <el-input v-model="Form.job" placeholder="请输入职位"></el-input>
        </el-form-item>
        <el-form-item label="入职日期">
          <el-date-picker
              v-model="Form.entrydate"
              type="date"
              format="yyyy-MM-dd"
              placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogEdit">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
        title="提示"
        :visible.sync="deleteVisible"
        width="30%"
        :before-close="handleClose">
      <span>确定删除吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteEdit">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 分页条 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[1, 2, 3, 4]"
        :page-size="2"
        layout="total, sizes, prev, pager, next, jumper"
        :total="4">
    </el-pagination>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'EmpView',
  data() {
    return {
      tableData: [],
      searchForm: {
        name: '',
        gender: '',
        entrydate: []
      },
      Form: {
        name: '',
        image: '',
        gender: '',
        entrydate: '',
        updatetime: ''
      },
      dialogVisible: false,
      deleteVisible: false,
      deleteId: ''
    }
  },
  mounted() {
    this.get()
  },
  methods: {
    handleSelect(key) {
      this.$router.push({
        path: key,
        params: {data: 'query' }
      })
    },
    dateFormat(date, format) {
      format = format || 'yyyy-MM-dd hh:mm:ss';
      if (date !== 'Invalid Date') {
        let o = {
          'M+': date.getMonth() + 1, //month
          'd+': date.getDate(), //day
          'h+': date.getHours(), //hour
          'm+': date.getMinutes(), //minute
          's+': date.getSeconds(), //second
          'q+': Math.floor((date.getMonth() + 3) / 3), //quarter
          S: date.getMilliseconds(), //millisecond
        };
        if (/(y+)/.test(format))
          format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
        for (let k in o)
          if (new RegExp('(' + k + ')').test(format))
            format = format.replace(
                RegExp.$1,
                RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
            );
        return format;
      }
      return '';
    },
    onSubmit() {
      // 根据姓名条件查询
      if(this.searchForm.name != ''){
        this.tableData = this.tableData.filter(item => {
          return item.name.includes(this.searchForm.name)
        })
      }

      // 根据性别条件查询
      if(this.searchForm.gender != '') {
        this.tableData = this.tableData.filter(item => {
          return item.gender == this.searchForm.gender
        })
      }

      // 根据入职日期条件查询
      if(this.searchForm.entrydate.length != 0) {
        this.tableData = this.tableData.filter(item => {
          // 转换为时间戳，进行比较
          let entrydate = new Date(item.entrydate).getTime()
          let begintime = new Date(this.searchForm.entrydate[0]).getTime()
          let endtime = new Date(this.searchForm.entrydate[1]).getTime()
          return entrydate >= begintime && entrydate <= endtime
        })
      }
    },
    onClear() {
      this.searchForm.name = '';
      this.searchForm.gender = '';
      this.searchForm.entrydate = [];

      this.get()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    get(){
      // 使用axios发送请求
      axios.get("https://console-mock.apipost.cn/mock/4250f8d4-b605-47eb-9777-07e29548dbb8/list")
          .then(response => {
            this.tableData = response.data.data
            console.log("this.users", this.tableData)
          })
          .catch(error => {
            console.log(error)
          })
    },
    handleClose(done) {
      this.dialogVisible = false;
      done();
    },
    edit(id) {
      this.dialogVisible = true;
      // 根据id, 获取当前行数据, 并赋值给Form（同时指向this.tableData的当前行对象，实现双向绑定）
      this.Form = this.tableData.find(item => item.id == id)
    },
    dialogEdit() {
      this.dialogVisible = false;
      // 修改更新时间为当前时间
      this.Form.updatetime = this.dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss')
      this.Form.entrydate = this.dateFormat(this.Form.entrydate, 'yyyy-MM-dd')
      console.log(this.Form)
      console.log(this.tableData)
    },
    del(id) {
      this.deleteVisible = true;
      this.deleteId = id
    },
    deleteEdit() {
      this.deleteVisible = false;
      // 根据id, 删除当前行数据
      this.tableData = this.tableData.filter(item => item.id != this.deleteId)
      console.log("删除")
    }
  }
}
</script>

<style>

</style>

DeptView.vue

<template>
  <h1>部门管理信息</h1>
</template>

<script>
export default{
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    handleSelect(key) {
      this.$router.push({
        path: key,
        params: {data: 'query' }
      })
    }
  }
}
</script>

<style>

</style>