Vue-shop登录页面无法跳转,一直转圈,http://localhost:8080/,MySQL连接和Web都运行正常,就是跳转不了
Login.vue代码
<template>
<div class="login_container">
<div class="login_box">
<!-- 头像区 -->
<div class="avatar_box">
<img src="./../assets/img/avatar.jpeg" alt />
</div>
<!-- 登录表单 -->
<div>
<el-form
:label-position="labelPosition"
ref="loginForm"
:rules="loginFormRules"
label-width="80px"
:model="loginForm"
>
<el-form-item label="用户名" prop="username">
<el-input prefix-icon="iconfont icon-user" v-model="loginForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input
type="password"
prefix-icon="iconfont icon-3702mima"
v-model="loginForm.password"
></el-input>
</el-form-item>
<el-form-item class="btns">
<el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
<el-button type="info" @click="restForm('loginForm')">忘记密码</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
labelPosition: "top",
loginForm: {
username: "admin",
password: "123456",
},
// 表单验证
loginFormRules: {
username: [
{ required: true, message: "请输入用户名", trigger: "blur" },
{ min: 3, max: 5, message: "长度应该在3到5之间", trigger: "blur" },
],
password: [
{ required: true, message: "请输入用户密码", trigger: "blur" },
{ min: 3, max: 6, message: "长度应该在3到6之间", trigger: "blur" },
],
},
};
},
methods: {
submitForm(loginForm) {
this.$refs[loginForm].validate(async (valid) => {
if (valid) {
const { data: res } = await this.$http.post("login", this.loginForm);
if(res.meta.status !== 200) {
this.$message({
message:'登录失败',
type:'warning'
})
}else {
this.$message({
message:'登录成功',
type:'success'
});
window.sessionStorage.setItem('token',res.data.token);
this.$router.push('/home');
}
} else {
console.log("error submit");
}
});
},
restForm(loginForm) {
this.$refs[loginForm].resetFields();
},
},
};
</script>
<style lang="less" scoped>
.login_container {
height: 100%;
background-color: pink;
position: relative;
.login_box {
width: 450px;
height: 360px;
background-color: #ffffff;
border-radius: 5px;
padding: 40px;
box-sizing: border-box;
box-shadow: 0 0 10px #999999;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.btns {
display: flex;
justify-content: center;
}
.el-button--info {
margin-left: 50px;
}
// 头像
.avatar_box {
position: absolute;
top: 0;
left: 50%;
width: 150px;
height: 150px;
border-radius: 75px;
overflow: hidden;
transform: translate(-50%, -70%);
z-index: 20;
border: 10px solid #ffffff;
box-sizing: border-box;
img {
display: block;
width: 100%;
height: 100%;
}
}
}
}
</style>
Home.vue代码
<template>
<el-container>
<el-header>
<div>
<img src="./../assets/logo.png" alt />
<span>何敬洲的商城后台管理系统</span>
</div>
<el-button type="danger" @click="logout">退出</el-button>
</el-header>
<el-container>
<el-aside :width="collapse ? '64px':'200px'">
<div class="toggle-button" @click="toggleButton">|||</div>
<el-menu
:default-active="activePath"
class="el-menu-vertical-demo"
unique-opened
router
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
:collapse="collapse"
:collapse-transition="false"
>
<!-- 一级菜单 -->
<el-submenu :index="item.id+' '" v-for="item in menuList" :key="item.id">
<template slot="title">
<i :class="menuListIcon[item.id]"></i>
<span>{{item.authName}}</span>
</template>
<!-- 二级菜单 -->
<el-menu-item
:index="'/'+subitem.path"
v-for="subitem in item.children"
:key="subitem.id"
@click="saveNavState('/' + subitem.path)"
><i class="el-icon-menu"></i>
{{subitem.authName}}</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<!-- 子元素的出口 -->
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
data() {
return {
menuList: "",
menuListIcon: {
"125": "iconfont icon-user",
"103": "iconfont icon-tijikongjian",
"101": "iconfont icon-shangpin",
"102": "iconfont icon-danju",
"145": "iconfont icon-baobiao",
},
activePath: "",
collapse:true
};
},
created() {
this.getMenuList();
},
methods: {
// 退出事件
logout() {
window.sessionStorage.clear();
this.$message({
message: "退出成功",
duration: 2000,
});
this.$router.push("/login");
},
// 请求左侧菜单的数据
async getMenuList() {
const { data: res } = await this.$http.get("menus");
if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
this.menuList = res.data;
},
// 保存连接的激活地址
saveNavState(activePath) {
window.sessionStorage.setItem("activePath", activePath);
},
// 左侧导航栏点击缩放事件
toggleButton() {
this.collapse = !this.collapse;
console.log(this.collapse);
}
},
};
</script>
<style lang="less" scoped>
.el-container {
height: 100%;
}
.el-header {
background-color: #373f41;
display: flex;
justify-content: space-between;
align-items: center;
div {
display: flex;
align-items: center;
img {
height: 40px;
}
span {
font-size: 24px;
font-weight: 700;
margin-left: 15px;
color: #ffffff;
}
}
.el-button {
float: right;
height: 40px;
}
}
.el-aside {
background-color: #545c64;
.el-menu {
border-right: none;
}
.iconfont {
padding-right: 10px;
}
.toggle-button {
text-align: center;
color: #ffffff;
background-color: #4A5064;
font-size: 10px;
line-height: 24px;
letter-spacing: .2em;
cursor: pointer;
}
}
.el-main {
background-color: #eaedf1;
}
//影藏中间的main区域的局部滚动条
.el-main::-webkit-scrollbar {
display: none;
}
</style>
Welcome.vue代码
<template>
<div>
<h1>admin,欢迎来到后台页面</h1>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
vue.config.js代码
module.exports = {
devServer:{
open:true,
port:80,
host:'localhost'
}
}
//通过改变入口和生成文件的大小来解决
module.exports = {
configureWebpack : {
//关闭webpack的性能提示
// performance : {
// hints : false
// },
performance: {
hints: 'warning',
// 入口起点的最大体积
maxEntrypointSize: 50000000,
// 生成文件的最大体积
maxAssetSize: 30000000,
// 只给出 js 文件的性能提示
assetFilter: function(assetFilename) {
return assetFilename.endsWith('.js') || assetFilename.endsWith('.css');
}
},
},
}
App.vue代码
<template>
<div id="app">
<!-- 路由出口 -->
<router-view></router-view>
</div>
</template>
<script>
//本地 接口地址
const localSrc = 'http://172.18.13.34:8080';
export default {
name: 'app',
localSrc,
components: {
}
}
</script>
<style>
</style>
npm run start 过程中没有任何报错,也可以在http://localhost:8080/#/login上显示
npm run build 打包之后放到Apache上运行也是登录无法跳转