课程名称：2022持续升级 Vue3 从入门到实战 掌握完整知识体系
课程章节：9-1 登陆页面布局开发，9-2 路由守卫实现基础登陆校验功能，9-3 注册页面开发及路由串联复习
主讲老师：Dell
课程内容：
今天学习的内容包括：登陆页面布局开发， 路由守卫实现基础登陆校验功能，注册页面开发及路由串联复习。
知识点： 每一个路由项有一个 beforeEnter 守卫；整体的路由项有一个 beforeEach 全局前置守卫，通过这两个可以实现登录效验功能
示例代码：
router/index.js
// 引入页面地址
import Home from '../views/home/Home'
import Register from '../views/register/Register'
import Login from '../views/login/Login'
// 配置页面路由
const routes = [{
path: '/',
name: 'Home',
component: Home
}, {
path: '/register',
name: 'Register',
component: Register,
// 路由刚进来，页面运行之前加载的方法，beforeEnter方法里包含着to,from,next三个参数。
// to:表示要去的页面
// from:从那个页面跳的
// next：判断条件的，告诉下一步要干嘛，如果只是next()就继续执行事件，反之给她判断。
beforeEnter(to, from, next) {
// 定义一个isLogin,赋予本地状态
const { isLogin } = localStorage;
// 如果本地已经登录，跳转Home页面，否则继续执行
isLogin ? next({ name: 'Home' }) : next();
}
}, {
path: '/login',
name: 'Login',
component: Login,
// 点击登录页面时候判断，login状态是否登录了。
beforeEnter(to, from, next) {
const { isLogin } = localStorage;
isLogin ? next({ name: 'Home' }) : next();
}
},
]
// 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = createRouter({
// 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
history: createWebHashHistory(),
// routes: routes` 的缩写
routes
})
// 路由拦截,如果没有登录的话，只能去登录页，或者注册页。
// 根据登录状态，或者前往的页面，判断是否要前往的页面。
router.beforeEach((to, from, next) => {
const { isLogin } = localStorage;
const { name } = to;
const isLoginOrRegister = (name === "Login" || name === "Register");
(isLogin || isLoginOrRegister) ? next(): next({ name: 'Login' });
})
export default router课程收获：
今天学了三个小节，差不多把第九章学了三分之一。今天学习的内容是登录注册页面，以前都用过，都不算复杂，期待明天。加油。
今日课程学习时间大约花费 21 分钟。