Vue2后台管理：项目开发全流程(一)

🌈个人主页：前端青山
🔥系列专栏：vue篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来vue篇专栏内容:Vue2后台管理：项目开发全流程(一)

Vue项目开发

项目架构搭建

1、创建项目

2、技术栈说明

初始化项目包

3、UI组件库

4、路由规划和配置

二、功能实现

1、注册功能

2、登录功能

3、后台首页布局

4、实现菜单跳转路由

5、注销登录

6、防止翻墙越权

7、回车确认提交

Vue项目开发

Vue开发项目核心点使用JS开发项目，前端页面。

Vue和原生JS及其jQuery的区别：换一种操作语法，尽量少的操作DOM

拥有了组件化，工程化的概念。可以进打包，压缩，混淆代码。。。。。单管理功能......针对不同的业务模块设置和开发的各种功能

项目架构搭建

前后端分离项目

1、创建项目

# 安装脚手架
npm i -g @vue/cli

# 生成项目包  在哪儿生成项目包 在哪儿执行
vue create 项目名称

选择创建项目包的参数选项

2、技术栈说明

“
客户端：

Vuejs 渲染库

Vue-Router SPA 单页面应用路由管理

Vuex 组件状态共享和管理

axios ajax请求的发送和封装

momentjs 处理时间格式化

scss css预处理器

服务端:

1、nodejs结合mongodb实现API接口

2、json-server 模拟API数据结构

3、使用服务端人员开发的接口

初始化项目包

根据需求删除项目包中无用的文件和内容

3、UI组件库

UI组件库能够帮助开发者快速实现页面效果的一种方式。封装好的一些组件开源出来，供大家使用。

自己调查一下，上网查，问问你的朋友同学他们在公司用什么？

组件库名称	使用端	框架
vantUI 有赞	移动端	Vue，React，微信小程序，支付宝小程序
mintUI 饿了么	移动端	Vue
elementUI 饿了么	PC端	Vue，React，Angular
antdesign 蚂蚁金服	PC端	Vue，React，Angular
antmobile 蚂蚁金服	移动端	React
nuxtui 京东	移动端	Vue，React

本次使用elementUI:https://element.eleme.io/#/zh-CN

①安装组件库

npm i element-ui -S

②完整引入elementUI

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 1、添加引入以下两行
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false
// 2、使用组件库
Vue.use(ElementUI)
new Vue({
  router,
  store,
  render: (h) => h(App)
}).$mount('#app')

③测试使用

App.vue 测试按钮组件引入使用情况

<template>
  <div>
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>

    <el-row>
      <el-button plain>朴素按钮</el-button>
      <el-button
        type="primary"
        plain
      >主要按钮</el-button>
      <el-button
        type="success"
        plain
      >成功按钮</el-button>
      <el-button
        type="info"
        plain
      >信息按钮</el-button>
      <el-button
        type="warning"
        plain
      >警告按钮</el-button>
      <el-button
        type="danger"
        plain
      >危险按钮</el-button>
    </el-row>

    <el-row>
      <el-button round>圆角按钮</el-button>
      <el-button :round="true">圆角按钮</el-button>
      <el-button
        type="primary"
        round
      >主要按钮</el-button>
      <el-button
        type="success"
        round
      >成功按钮</el-button>
      <el-button
        type="info"
        round
      >信息按钮</el-button>
      <el-button
        type="warning"
        round
      >警告按钮</el-button>
      <el-button
        type="danger"
        round
      >危险按钮</el-button>
    </el-row>

    <el-row>
      <el-button
        icon="el-icon-search"
        circle
      ></el-button>
      <el-button
        type="primary"
        icon="el-icon-edit"
        circle
      ></el-button>
      <el-button
        type="success"
        icon="el-icon-check"
        circle
      ></el-button>
      <el-button
        type="info"
        icon="el-icon-message"
        circle
      ></el-button>
      <el-button
        type="warning"
        icon="el-icon-star-off"
        circle
      ></el-button>
      <el-button
        type="danger"
        icon="el-icon-delete"
        circle
      ></el-button>
    </el-row>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
</style>

4、路由规划和配置

功能	URL	备注
注册	/register
登录	/login
管理功能	/admin	父级路由
用户管理功能	/admin/user	嵌套子路由

“
注意：在配置好路由文件后，一定要记得在App.vue添加渲染标签否则无法切换显示

<router-view></router-view>

二、功能实现

1、注册功能

①表单选项布局

根据注册功能需要的表单选项进行表单的设置及其校验工作。收集数据并通过ajax提交

src\views\Register.vue

<template>
    <div class="container">
        <div class="title">综合数据运营管理平台</div>
        <!-- 注册表单 -->
        <!-- card组件 -->
        <el-card style="margin-top: 20px;padding: 10px 30px">
            <!-- 表单组件 -->
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px">
                <!-- 表单每个元素 -->
                <el-form-item prop="username">
                    <!-- 输入框 -->
                    <el-input v-model="ruleForm.username" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item prop="pass">
                    <el-input type="password" v-model="ruleForm.pass" autocomplete="off" placeholder="密码"></el-input>
                </el-form-item>
                <el-form-item prop="checkPass">
                    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" placeholder="确认密码"></el-input>
                </el-form-item>

                <el-form-item style="display: flex;justify-content:space-around;">
                    <el-button type="primary" style="width: 220px;" @click="submitForm('ruleForm')">注册</el-button>
                    <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        // 校验用户名
        var checkUsername = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('用户名不能为空'));
            }
            return callback()
        };
        // 校验密码
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else if (value.length < 6) {
                callback(new Error('密码长度最少6位'))
            }
            else {
                if (this.ruleForm.checkPass !== '') {
                    this.$refs.ruleForm.validateField('checkPass');
                }
                callback();
            }
        };
        // 校验确认密码
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm.pass) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            // 表单双向绑定数据
            ruleForm: {
                username: '',
                pass: '',
                checkPass: '',
            },
            // 校验规则及其校验时机
            rules: {
                pass: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                checkPass: [
                    { validator: validatePass2, trigger: 'blur' }
                ],
                username: [
                    { validator: checkUsername, trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    height: 100vh;
    background: url('../assets/images/bg.jpg');
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .title {
        font-size: 28px;
        padding: 15px;
        border-radius: 10px;
        font-weight: bold;
        color: white;
        background-color: rgba($color: #000000, $alpha: 0.4);
    }
}

/* 使用::v-deep(选择器) 实现样式向下级组件穿透 */
::v-deep(.el-form-item__content) {
    margin-left: 0px !important;
}
</style>

②安装axios

npm i axios

③发送根据请求进行判断业务逻辑

methods: {
        // 提交表单
        submitForm(formName) {
            // ref获取到子组件的实例  validate el-from表单组件里的校验方法
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 通过就提交表单
                    // alert('submit!');
                    // 收集数据
                    console.log(this.ruleForm);
                    const { username, pass } = this.ruleForm
                    // 组合接口需要的数据结构
                    const data = { username, password: pass }
                    axios.post('http://localhost:5000/api/v1/register', data).then(res => {
                        console.log(res);
                        // message提示框组件
                        this.$message({
                            type: res.data.code === 0 ? 'success' : 'error',
                            duration:1000,
                            message: res.data.msg,
                            onClose: () => {
                                // 跳转到登录页面
                                this.$router.push('/login')
                            }
                        });
                    })
                } else {
                    // 校验不通过
                    console.log('error submit!!');
                    return false;
                }
            });
        },
    }

请求方法的拦截器封装

src\utils\request.js

/**
 *  axios拦截器
 *  请求拦截器   统一配置请求参数信息
 *  响应拦截器   统一处理响应返回数据
 * 
 */

import axios from 'axios'
import { Loading } from 'element-ui'
var loading
const instance = axios.create({
    // 接口基础地址  接口的公共地址 一般域名
    // baseURL:'',
    // 超时时间
    // timeout:5000
})
// 请求拦截器
instance.interceptors.request.use(cfg => {
    // 封装请求加载状态
    loading = Loading.service({
        text: "loading...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.8)"
    });
    return cfg
})

// 响应拦截器
instance.interceptors.response.use(res => {
    setTimeout(() => {
        // 请求加载状态停止
        loading.close()
    }, 700)

    return res
})

export default instance

接口地址封装

src\config\url.js

/**
 *  封装接口url地址
 *  方便统一管理
 * 
 */

const prefix = 'http://localhost:5000/api/v1'
const url = {
    // 注册
    Register: prefix + '/register'
}
export default url

2、登录功能

①表单收集用户登录信息

②发送请求给服务端接口

③根据返回结果处理业务逻辑服务端

1> 登录成功返回token

2> 登录失败提示错误

④存储token和用户信息方便后续使用

响应拦截器 \backend\src\http\req.js

axios.interceptors.response.use((res) => {
  // 统一存储token
  if (res.data.code === 0) {
    localStorage.setItem('token', res.data.token)
  }
  return res.data
})

登录成功后设置 \backend\src\views\Login.vue

if (res.code === 0) {
                localStorage.setItem('username',res.data.username)
                this.$message({
                  message: '登录成功',
                  type: 'success',
                  duration:1000,
                  onClose: () => {
                    this.$router.push('/admin')
                  }
                })
}

3、后台首页布局

布局实现

src\views\Admin\Admin.vue

<template>
    <div>
        <!-- 整个容器布局 -->
        <el-container>
            <!-- 左侧菜单 -->
            <el-aside width="200px">
                <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                    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>
                            <template slot="title">分组一</template>
                            <el-menu-item index="1-1">选项1</el-menu-item>
                            <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="分组2">
                            <el-menu-item index="1-3">选项3</el-menu-item>
                        </el-menu-item-group>
                        <el-submenu index="1-4">
                            <template slot="title">选项4</template>
                            <el-menu-item index="1-4-1">选项1</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <span slot="title">导航二</span>
                    </el-menu-item>
                    <el-menu-item index="3" disabled>
                        <i class="el-icon-document"></i>
                        <span slot="title">导航三</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <span slot="title">导航四</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <!-- 右侧容器 -->
            <el-container>
                <!-- 头部 -->
                <el-header>Header</el-header>
                <!-- 主体 -->
                <el-main>Main</el-main>
                <!-- 底部 -->
                <el-footer>Footer</el-footer>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.el-container {
    /* 设置容器的高度 */
    height: 100vh;
}

.el-menu {
    /* 默认菜单右侧1px边框 去掉 */
    border-right: 0;
}

.el-header,
.el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
}

.el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
}


.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}
</style>

左侧列表菜单

使用组件：https://element.eleme.io/#/zh-CN/component/menu

NavMenu 导航菜单

el-menu 整个菜单组件

el-menu-item 每个菜单组件

src\views\Admin\Admin.vue

<template>
    <div>
        <!-- 整个容器布局 -->
        <el-container>
            <!-- 左侧菜单 -->
            <el-aside width="200px">
                <div class="logo">
                    <div>
                        <img src="@/assets/logo.png" alt="" srcset="">
                    </div>
                    <div>综合数据管理平台</div>
                </div>
                <!-- 菜单 -->
                <el-menu router default-active="2" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                    <!-- index 开启router路由模式 会作为路由跳转的路径 -->
                    <el-menu-item index="/admin/dashboard">
                        <!-- icon图标 菜单左侧 -->
                        <i class="el-icon-menu"></i>
                        <span slot="title">控制台</span>
                    </el-menu-item>
                    <!-- <el-submenu index="/admin/user">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span slot="title">用户管理</span>
                        </template> -->
                    <!-- <el-menu-item index="4">
                            <i class="el-icon-setting"></i>
                            <span slot="title">管理员管理</span>
                        </el-menu-item> -->
                    <el-menu-item index="/admin/user">
                        <i class="el-icon-setting"></i>
                        <span slot="title">会员管理</span>
                    </el-menu-item>
                    <!-- </el-submenu> -->
                </el-menu>
            </el-aside>
            <!-- 右侧容器 -->
            <el-container>
                <!-- 头部 -->
                <el-header>Header</el-header>
                <!-- 主体 -->
                <el-main>
                    <!-- 嵌套路由渲染容器 -->
                    <router-view></router-view>
                </el-main>
                <!-- 底部 -->
                <el-footer>Footer</el-footer>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.el-container {
    /* 设置容器的高度 */
    height: 100vh;
}

.el-menu {
    /* 默认菜单右侧1px边框 去掉 */
    border-right: 0;
}

.el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
}

.logo {
    height: 60px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: white;
    font-weight: bold;
    background-color: rgb(84, 92, 100);

    >div:first-child {
        width: 40px;
        height: 40px;

        >img {
            width: 100%;
        }
    }
}

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

.el-header,
.el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
}



.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}
</style>

4、实现菜单跳转路由

①在后台首页面中添加渲染容器

\src\views\Admin\Admin.vue

 <el-main>
    <!-- 子路由渲染容器 -->
    <router-view></router-view>
 </el-main>

②根据嵌套路由的配置规则创建对应路由和页面组件

src\router\index.js

{
    path:'/admin',
    component:()=>import('@/views/Admin/Admin.vue'),
    children:[
      {
        path:'dashboard',
        component:()=>import('@/views/admin/Dashboard.vue'),
      },
      {
        path:'user',
        component:()=>import('@/views/admin/User.vue'),
      },
      {
        path:'goods',
        component:()=>import('@/views/admin/Goods.vue'),
      },
    ]
  }

③开启菜单路由功能，并且配置对应的index参数

\backend\src\views\admin\Index.vue

<el-menu
            default-active="/admin/dashboard"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#001529"
            text-color="#fff"
            active-text-color="#409eff"
            router
          >
            <el-menu-item index="/admin/dashboard">
              <!-- <i class="el-icon-platform-eleme" style="color:#409eff"></i> -->
              <i class="el-icon-platform-eleme"></i>
              <span slot="title">控制台</span>
            </el-menu-item>
            <el-menu-item index="/admin/user">
              <i class="el-icon-user-solid"></i>
              <span slot="title">用户管理</span>
            </el-menu-item>
            <el-menu-item index="/admin/goods">
              <i class="el-icon-s-goods"></i>
              <span slot="title">商品管理</span>
            </el-menu-item>
          </el-menu>

5、注销登录

思路：

1、按钮点击触发事件处理注销

2、登录依据是判断是否有token，及其是否过期，退出登录的核心就是把token删除

退出按钮

<!-- 显示管理登录信息及其下拉菜单 -->
                    <el-dropdown @command="handleCommand">
                        <span class="el-dropdown-link">
                            <el-avatar size="medium"
                                src="https://img1.baidu.com/it/u=3096599450,2589974591&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></el-avatar>
                            <span style="font-weight: bold;">{{ username }}</span><i
                                class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="ucenter">个人中心</el-dropdown-item>
                            <el-dropdown-item command="logout">退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>

js代码部分删除token

 handleCommand(value) {
            console.log(value);
            if (value === 'logout') {
                this.$confirm('确认退出吗？')
                    // 确定
                    .then(_ => {
                        // 将用户的token和记录信息全部清空掉
                        localStorage.removeItem('token')
                        localStorage.removeItem('username')
                        this.$message({
                            message: '退出成功',
                            type: 'success',
                            duration: 700,
                            onClose: () => {
                                this.$router.replace('/login')
                            }
                        })
                    })
                    // 取消
                    .catch(_ => {
                        // console.log(_);
                        // console.log('2222');
                    });
            }
        }

6、防止翻墙越权

注意校验是否登录权限，需要携带token信息在请求头

// 请求拦截器
instance.interceptors.request.use(cfg => {
    // 如果token存在,则统一添加token到请求头信息
    if (localStorage.getItem('token')) {
        cfg.headers.Authorization = localStorage.getItem('token')
    }
    // 封装请求加载状态
    loading = Loading.service({
        text: "loading...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.8)"
    });
    return cfg
})

实现方法：

方法一：父级路由组件的beforeCreate生命周期拦截

beforeCreate() {
    if (!localStorage.getItem('token')) {
      this.$tip('请先登录', 'error')
      this.$router.replace('/login')
    } else {
      this.$http.get('http://127.0.0.1:5000/api/v1/profile').then((res) => {
        if (res.data.code === 401) {
          this.$tip('请先登录', 'error')
          this.$router.replace('/login')
        } else {
          localStorage.setItem('userInfo', JSON.stringify(res.data.data))
        }
      })
    }
  },

方法二：使用路由守卫进行拦截

全局路由前置守卫

src\router\index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import { Message } from 'element-ui';
import url from '@/config/url';
import req from '@/utils/request'
import Register from '../views/Register.vue'
import Login from '../views/Login.vue'
import Admin from '../views/Admin/Admin.vue'
import Dashboard from '../views/Admin/Dashboard.vue'
import User from '../views/Admin/User.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/register'
  },
  {
    path: '/register',
    name: 'register',
    component: Register,
    meta: {
      isAuth: false
    }
  },
  {
    path: '/login',
    name: 'login',
    component: Login,
    // 路由元信息 路由传参
    meta: {
      isAuth: false
    }
  },
  {
    path: '/admin',
    name: 'admin',
    component: Admin,
    children: [
      {
        // 嵌套路由中 path 不需要写/  
        path: 'dashboard',
        name: 'dashboard',
        component: Dashboard
      },
      {
        path: 'user',
        name: 'user',
        component: User
      }
    ],
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
// 全局前置守卫
router.beforeEach((to, from, next) => {
  console.log(to, from);
  // 根据路由元信息 判断哪些路由是需要校验登录
  if (to.meta.isAuth === false) {
    next()
  } else {
    // 如果本地存储未报错token 肯定没有登录
    if (!localStorage.getItem('token')) {
      Message({
        message: '未登录,请先登录',
        type: 'error',
        duration: 1000,
        onClose: () => {
          // 跳转到登录界面
          next('/login')
        }
      })
    } else {
      // 校验token的有效性
      req.get(url.Profile).then(res => {
        console.log(res);
        if (res.data.code === 0) {
          // 存储管理员登录信息
          localStorage.setItem('username', res.data.data.username)
        } else {
          Message({
            message: '登录失效,重新登录',
            type: 'error',
            duration: 1000,
            onClose: () => {
              // 跳转到登录界面
              next('/login')
            }
          })
        }
      })
      next()
    }
  }

})

export default router

路由独享守卫

src\router\index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import { Message } from 'element-ui';
import url from '@/config/url';
import req from '@/utils/request'
import Register from '../views/Register.vue'
import Login from '../views/Login.vue'
import Admin from '../views/Admin/Admin.vue'
import Dashboard from '../views/Admin/Dashboard.vue'
import User from '../views/Admin/User.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/register'
  },
  {
    path: '/register',
    name: 'register',
    component: Register,
    meta: {
      isAuth: false
    }
  },
  {
    path: '/login',
    name: 'login',
    component: Login,
    // 路由元信息 路由传参
    meta: {
      isAuth: false
    }
  },
  {
    path: '/admin',
    name: 'admin',
    component: Admin,
    children: [
      {
        // 嵌套路由中 path 不需要写/  
        path: 'dashboard',
        name: 'dashboard',
        component: Dashboard
      },
      {
        path: 'user',
        name: 'user',
        component: User
      }
    ],
    // 路由 独享守卫
    beforeEnter: (to, from, next) => {
      // console.log(to);
      // // 如果本地存储未报错token 肯定没有登录
      if (!localStorage.getItem('token')) {
        Message({
          message: '未登录,请先登录',
          type: 'error',
          duration: 1000,
          onClose: () => {
            // 跳转到登录界面
            next('/login')
          }
        })
      } else {
        // 校验token的有效性
        req.get(url.Profile).then(res => {
          console.log(res);
          if (res.data.code === 0) {
            // 存储管理员登录信息
            localStorage.setItem('username', res.data.data.username)
              next()
          } else {
            Message({
              message: '登录失效,重新登录',
              type: 'error',
              duration: 1000,
              onClose: () => {
                // 跳转到登录界面
                next('/login')
              }
            })
          }
        })
      }
    },
  }
  // {
  //   path: '/about',
  //   name: 'about',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  // }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

组件内部的前置守卫

src\views\Admin\Admin.vue

<template>
    <div>
        <!-- 整个容器布局 -->
        <el-container>
            <!-- 左侧菜单 -->
            <el-aside width="200px">
                <div class="logo">
                    <div>
                        <img src="@/assets/logo.png" alt="" srcset="">
                    </div>
                    <div>综合数据管理平台</div>
                </div>
                <!-- 菜单 -->
                <!-- default-active 根据路由路径匹配 选中的对应的菜单高亮 -->
                <el-menu router :default-active="$route.path" background-color="#001529" text-color="#ccc">
                    <!-- index 开启router路由模式 会作为路由跳转的路径 -->
                    <el-menu-item index="/admin/dashboard">
                        <!-- icon图标 菜单左侧 -->
                        <i class="el-icon-data-line"></i>
                        <span slot="title">控制台</span>
                    </el-menu-item>
                    <!-- <el-submenu index="/admin/user">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span slot="title">用户管理</span>
                        </template> -->
                    <!-- <el-menu-item index="4">
                            <i class="el-icon-setting"></i>
                            <span slot="title">管理员管理</span>
                        </el-menu-item> -->
                    <el-menu-item index="/admin/user">
                        <i class="el-icon-user"></i>
                        <span slot="title">会员管理</span>
                    </el-menu-item>
                    <!-- </el-submenu> -->
                </el-menu>
            </el-aside>
            <!-- 右侧容器 -->
            <el-container>
                <!-- 头部 -->
                <el-header>Header</el-header>
                <!-- 主体 -->
                <el-main>
                    <!-- 嵌套路由渲染容器 -->
                    <div>
                        <router-view></router-view>
                    </div>
                </el-main>
                <!-- 底部 -->
                <el-footer>Footer</el-footer>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import { Message } from 'element-ui';
import url from '@/config/url';
import req from '@/utils/request'
export default {
    // 拦截操作 判断用户是否登录
    // 路由 组件内置守卫  内部获取不到组件的this 此时组件还未被创建
    beforeRouteEnter(to, form, next) {
        // 如果本地存储未报错token 肯定没有登录
        if (!localStorage.getItem('token')) {
            Message({
                message: '未登录,请先登录',
                type: 'error',
                duration: 1000,
                onClose: () => {
                    // 跳转到登录界面
                    next('/login')
                }
            })
        } else {
            // 校验token的有效性
            req.get(url.Profile).then(res => {
                console.log(res);
                if (res.data.code === 0) {
                    // 存储管理员登录信息
                    localStorage.setItem('username',res.data.data.username)
                } else {
                    Message({
                        message: '登录失效,重新登录',
                        type: 'error',
                        duration: 1000,
                        onClose: () => {
                            // 跳转到登录界面
                            next('/login')
                        }
                    })
                }
            })
            next()
        }
    }
}
</script>

<style lang="scss" scoped>
.el-container {
    /* 设置容器的高度 */
    height: 100vh;
}

.el-menu {
    /* 默认菜单右侧1px边框 去掉 */
    border-right: 0;
}

.el-aside {
    background-color: #001529;
    color: #333;
    /* text-align: center; */
}

.logo {
    height: 60px;
    display: flex;
    /* justify-content: space-around; */
    align-items: center;
    color: white;
    font-weight: bold;
    background-color: #001529;
    padding: 5px;

    >div:first-child {
        width: 40px;
        height: 40px;

        >img {
            width: 100%;
        }
    }

    >div:nth-child(2) {
        margin-left: 10px;
    }
}

.el-main {
    background-color: #f5f5f5;

    >div {
        background-color: #fff;
        min-height: calc(100vh - 60px - 60px - 20px - 20px - 20px);
        margin-top: 20px;
    }
}

.el-menu-item {
    height: 40px;
    line-height: 40px;
    margin: 5px 10px;
    border-radius: 10px;
}

.el-menu-item.is-active {
    color: white !important;
    background-color: #1677ff !important;
}

.el-header {
    background-color: #ffffff;
    text-align: center;
    line-height: 60px;
}

.el-footer {
    background-color: #f5f5f5;
    text-align: center;
    line-height: 60px;
}
</style>

7、回车确认提交

mounted() {
    // 文档对象监听键盘事件   回车键
    document.onkeyup = (event) => {
      var e = event || window.event
      if (e && e.keyCode == 13) {
        // console.log('回车')
        this.submitForm('ruleForm')
      }
    }
  },