注册登录页面是在嵌套路由下匹配的页面
{
path: '/user',
component: UserLayout,
children: [
{
path: 'login',
component: Login
},
{
path: 'register',
component: Register
}
]
}
login和register子路由都是在UserLayout模版中输出。所以需要在UserLayout模版中添加一个<router-view>出口。
编辑用户布局
用户布局是layouts/UserLayout.vue组件。此组件作为/user路由映射的组件。编辑此文件
<template>
<div class="user">
<div>
<b-navbar toggleable="lg">
<b-navbar-brand to="/">AntFootQA</b-navbar-brand>
</b-navbar>
</div>
<router-view />
</div>
</template>
<script>
export default {
name: 'UserLayout',
}
</script>
<style scoped>
.user {
background-color: #f1f1f1;
width: 100%;
height: 100%;
position: absolute;
top: 0;
border: hidden;
}
</style>
内容仅包括一个路由出口<router-view>。
编辑注册页面
编辑src/views/Register.vue文件
<template>
<div class="container">
<Alert :msg=toastMsg></Alert>
<div class="auth-form">
<div class="link">
<b-link to="/user/login" style="color: #969696">登录</b-link>
<b> | </b>
<b-link to="/user/register" style="color: #ea6f5a;font-weight: 700;border-bottom: 2px solid #ea6f5a;">注册</b-link>
</div>
<b-form @submit="onSubmit">
<b-form-group
id="registerEmail"
>
<b-input-group size="mb-2">
<b-input-group-prepend is-text>
<b-icon icon="envelope"></b-icon>
</b-input-group-prepend>
<b-form-input
class="form-control"
id="registerEmailInput"
v-model="form.email"
type="email"
placeholder="邮箱"
required
></b-form-input>
</b-input-group>
</b-form-group>
<b-form-group id="registerName">
<b-input-group class="mb-2">
<b-input-group-prepend is-text>
<b-icon icon="person-fill"></b-icon>
</b-input-group-prepend>
<b-form-input
id="registerNameInput"
v-model="form.name"
placeholder="你的名字"
required
></b-form-input>
</b-input-group>
</b-form-group>
<b-form-group id="registerPwd">
<b-input-group class="mb-2">
<b-input-group-prepend is-text>
<b-icon icon="lock-fill"></b-icon>
</b-input-group-prepend>
<b-form-input
id="registerPwdInput"
v-model="form.password"
placeholder="设置密码"
type="password"
required
></b-form-input>
</b-input-group>
</b-form-group>
<b-form-group id="registerPwdConfirmed">
<b-input-group class="mb-2">
<b-input-group-prepend is-text>
<b-icon icon="lock-fill"></b-icon>
</b-input-group-prepend>
<b-form-input
id="registerPwdConfirmedInput"
v-model="form.password_confirmation"
placeholder="确认密码"
type="password"
required
></b-form-input>
</b-input-group>
</b-form-group>
<b-button style="width: 100%" type="submit" pill variant="success">注册</b-button>
</b-form>
</div>
</div>
</template>
<script>
import Alert from '../components/Alert'
export default {
name: 'Register',
data() {
return {
form: {
email: '',
name: '',
password: '',
password_confirmation: ''
},
toastMsg: ''
}
},
components: {
Alert
},
methods: {
onSubmit(event) {
event.preventDefault()
this.$store.dispatch('Register', this.form).then((res) => {
console.log(res)
if (res.code === 0) {
this.$router.push('/')
}
this.toastMsg = res.msg
})
},
}
}
</script>
<style scoped>
.container {
background-color: #fff;
position: relative;
top: 80px;
width: 400px;
margin: 0 auto;
padding: 50px 30px;
}
.link {
margin: 0 auto 50px;
padding: 1px;
font-weight: 400;
color: #969696;
text-align: center;
font-size: 18px;
}
.link a {
padding: 10px;
}
a, a:link, a:visited, a:hover, a:active {
text-decoration: none;
}
</style>
编辑登录页面
编辑src/views/Login.vue文件
<template>
<div class="container">
<Alert :msg=toastMsg></Alert>
<div class="auth-form">
<div class="link">
<b-link to="/user/login" style="color: #ea6f5a;font-weight: 700;border-bottom: 2px solid #ea6f5a;">登录</b-link>
<b> | </b>
<b-link to="/user/register" style="color: #969696">注册</b-link>
</div>
<b-form style="width: 80%; margin: 20px auto" @submit="onSubmit">
<b-form-group
id="loginEmail"
>
<b-input-group size="mb-2">
<b-input-group-prepend is-text>
<b-icon icon="envelope"></b-icon>
</b-input-group-prepend>
<b-form-input
class="form-control"
id="loginEmailInput"
v-model="form.email"
type="email"
placeholder="邮箱"
required
></b-form-input>
</b-input-group>
</b-form-group>
<b-form-group id="loginPwd">
<b-input-group class="mb-2">
<b-input-group-prepend is-text>
<b-icon icon="lock-fill"></b-icon>
</b-input-group-prepend>
<b-form-input
id="loginPwdInput"
v-model="form.password"
placeholder="密码"
type="password"
required
></b-form-input>
</b-input-group>
</b-form-group>
<b-button style="width: 100%" type="submit" pill variant="success">登录</b-button>
</b-form>
</div>
</div>
</template>
<script>
import Alert from '../components/Alert'
export default {
name: 'Login',
data() {
return {
form: {
email: '',
password: '',
},
toastMsg: ''
}
},
components: {
Alert
},
methods: {
onSubmit(event) {
event.preventDefault()
this.$store.dispatch('Login', this.form).then((res) => {
if (res.code === 0) {
this.$router.push('/')
}
this.toastMsg = res.msg
})
},
}
}
</script>
<style scoped>
.container {
background-color: #fff;
position: relative;
top: 80px;
width: 400px;
margin: 0 auto;
padding: 50px 30px;
}
.link {
margin: 0 auto 50px;
padding: 1px;
font-weight: 400;
color: #969696;
text-align: center;
font-size: 18px;
}
.link a {
padding: 10px;
}
a, a:link, a:visited, a:hover, a:active {
text-decoration: none;
}
</style>