**课程名称：前端工程师
课程章节： 第三章 项目登录&注册页开发
主讲老师：Dell
课程内容： 第三章 登录&注册页开发
3-1登陆页面布局开发
1.实现元素垂直居中效果
transform: translateY(-50%) 实现元素垂直居中效果，代码如下：
.wrapper {
// 垂直居中的写法
position: absolute;
top: 50%;
left: 0;
right: 0;
// transform: translateY(-50%) 实现元素垂直居中效果
transform: translateY(-50%);
2、::placehover属于伪元素
可以选择一个表单元素的提示文字，设置它的样式，示例：
<!-- ::placehover属于伪元素，可以选择一个表单元素的提示文字，设置它的样式 -->
<div class="wrapper__input">
<input
class="wrapper__input__content"
placeholder="请输入用户名"
v-model="username"
/>
</div>
3、登录页面及路由配置
路由 router：
<template>
<router-view />
</template>
配置路由：
import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'Home',
component: () => import(/* webpackChunkName: "home" */ '../views/home/Home')
}, {
path: '/cartList',
name: 'CartList',
// 同步路由
// component: Home
// 动态路由
component: () => import(/* webpackChunkName: "cartList" */ '../views/cartList/CartList')
}
3-2 路由守卫实现基础登陆校验功能
useRouter()获取路由器
1.页面跳转及局部组件路由限定：
<div class="wrapper__longin-link" @click="handleRegisterClick">
// 引入useRouter
import { useRouter } from "vue-router"
// 处理注册跳转
const uesRegisterEffect = () => {
const router = useRouter()
const handleRegisterClick = () => {
// 路由跳转功能，跳转到name是Register这个router页面
router.push({ name: "Register" });
}
return { handleRegisterClick }
}
2.路由全局校验
- 路由守卫，全局检验功能，beforeEac：每次路由即将改变之前，路由在每次切换时，会执行
- 判断是否登陆 或者 to.name === ‘Login’，判断是否进入的login页，如果是，就执行当前Login页面，如果不是，跳转到login登陆页面
- 简化后三元运算：
const isLoginOrRegister = ( name === ‘Login’|| name ===‘Register’ );
(isLogin || isLoginOrRegister ) ? next() : next({ name: ‘Login’ }) - Login页面登陆成功后跳转到Home页面，但有一个漏洞：地址栏输入login地址时还是会跳转到login登陆页面。实际上账号登陆成功进入首页后，不应该还可以返回登陆页面的，这是不符合逻辑的， 解决方法：
beforeEnter(to, from, next) 访问login页面之前才会执行的函数
breforeEach() 路由切换的时候都会执行的函数
const router = createRouter({
history: createWebHashHistory(),
routes
})
// 路由守卫，全局检验功能，beforeEac：每次路由即将改变之前，路由在每次切换时，会执行
router.beforeEach((to, form, next) => {
// 获取本地存储的登陆信息，登陆状态
// 解析赋值
const { isLogin } = localStorage;
const { name} = to;
// 判断是否登陆 或者 to.name === 'Login' 判断是否进入的login页，如果是，就执行当前Login页面，如果不是，跳转到login登陆页面
const isLoginOrRegister = ( name === 'Login'|| name ==='Register' );
(isLogin || isLoginOrRegister ) ? next() : next({ name: 'Login' })
3. 使用breforeEach函数
to，from，next是规定的参数 指每次做路由跳转之前都会执行的方法，不管路由切换的时候都会执行
1）next()方法可以理解为中间件继续执行的方法 ，路由的控制参数，常用的有next(true)和next(false)
2）to是跳到哪个页面的信息
3）from是从哪里跳过来
4. 现在点击登陆之后，只能添加isLogin，页面跳转还要自己手动跳转。 解决办法：获取router的实例，利用push对路由进行操作。
const useLoginEffcet = (showToast) => {
const router = useRouter()
const data = reactive({username: "", password: ""})
// 请求后端的逻辑，异步操作
const handleLogin = async () => {
// 发一个请求
// 先执行await中的代码，后面的地址出错的时候，就会抛出
try {
const result = await post("/api/user/login", {
username: data.username,
password: data.password,
});
if (result?.errno === 0) {
localStorage.isLogin = true;
router.push({ name: "Home" });
} else {
showToast("登陆失败");
}
} catch (e) {
showToast("请求失败");
}
}
const {username,password } = toRefs (data)
return {username,password,handleLogin}
}
学习收获：
学会了使用元素垂直居中的效果，路由守卫实现基础登陆校验功能！
随时随地看视频
