创建一个Home.vue组件
然后配置路由
导入组件

import Home from '../views/Home.vue'

为组件添加路由信息

{
    path: '/home',
    name: 'Home',
    component: Home
}

为登录页添加跳转到Home的链接

postRequest("/login", this.loginForm).then((resp) => {
            // 转换接收json格式
            // alert(JSON.stringify(resp));
            // 判断resp是否存在,如果不存在,可能被拦截器拦截
            if (resp){
              // 定义token,拿到请求后端的token
              const tokenStr=resp.obj.tokenHead+resp.obj.token;
              // 存在,则路由跳转
              /*
                replace:替换页面,不可以通过后退按钮回到上一页面
                push:跳转页面,可以通过后退按钮回到上一页面
               */
              this.$router.replace('/home');
            }
          });

要在请求头上添加token值来验证
所以在api中写入请求拦截器
api.js

// 请求拦截器
axios.interceptors.request.use(config => {
  // 判断例如Login页中102行是否存储进用户token值
  if (window.sessionStorage.getItem('tokenStr')) {
    // 存在token,之后请求头就会带上这个token
    config.headers['Authorization'] = window.sessionStorage.getItem('tokenStr');
  }
  return config;
}, error => {
  console.log(error);
})

完善api拦截器

// 传送json的get请求拦截器
export const getRequest = (url, params) => {
  return axios({
    method: 'get', //设定格式
    url: `${base}${url}`,
    data: params
  })
}
// 传送json的delete请求拦截器
export const deleteRequest = (url, params) => {
  return axios({
    method: 'delete', //设定格式
    url: `${base}${url}`,
    data: params
  })
}

添加登录页面的登录按钮加载动画效果,详细请看element文档

<el-form v-loading="loading" element-loading-text="正在登陆..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" ref="loginForm" :model="loginForm" :rules="rules" class="loginContainer">
if (valid) {
          // 点击完登录按钮后显示加载效果
          this.loading=true;
if (resp) {
              // 登录完成后关闭登录按钮加载效果
              this.loading=true;

全局配置请求方式引用
在main.js中引入请求依赖

// 引入请求依赖
import { deleteRequest, getRequest, postRequest, putRequest } from "@/utils/api";

然后在main.js中用组件的方式进行全局配置

// 用组件的方式进行全局配置
Vue.prototype.postRequest = postRequest;
Vue.prototype.putRequest = putRequest;
Vue.prototype.getRequest = getRequest;
Vue.prototype.deleteRequest = deleteRequest;

之后使用请求方式的时候只需要前面加上this,使用的就是main中全局配置的请求方式了

this.postRequest("/login", this.loginForm).then((resp) => {

前端页面停留在视频41导航菜单功能实现,因登录页没有后台链接,所以无法继续进行