Navigation Guards 导航守卫

前言
本来看了看以为自己懂了，用法也跟Lifecycle hooks差不多，觉得好像没什么好说的，打算跳过导航守卫，但今天一早起床，试着在脑海回想解释给自己听，支支吾吾的，非常不靠谱，我还是很需要故事来诠释，用小朋友都能理解的故事来记忆才能让我印象深刻。也许之后儿子想学，可以派上用场XD导航守卫
今天来打造一间虚拟银行吧！碍于时间，没有实作只有概念讲解，小儿子肠胃炎ing，趁他睡觉休息时偷空写一下(泪)，好的，不说废话，银行最重要就是保全系统，我的认知下，保全系统即为今天的主题导航守卫。下面会提到的每个hook都是一个守卫的概念，各司其职，也分派在以下不同的三个工作竿位全域：也就是整间银行，不管到哪都适用，有三个hooks，可供调用beforeEach:本来我的想像是黏在银行各个门窗上的保全系统，防止没有权限的外人从任何地方进入，但越想越矛盾，他的意思是在进入任一路由前必经的程序，所以应该假设自己是银行员工，当你进到银行大厅，不管你要去哪个单位（跳转至每个路由前），都必须有员工证（身份验证）才能进入，否则就会被请回大厅（回到登入页面）。beforeResolve:这个hook在路由跳转前但beforeEach执行完且在所有路由的导航守卫都执行完时触发，通常用在呼叫api跟拿资料。这个比较抽象，我还没想好它是什么？是单位内的同仁先行得知谁谁谁要来，他会需要用到什么资料，在他还没进门前，先备好的意思吗？我不是很确定．．．afterEach:路由跳转结束后触发，通常用于追蹤使用者浏览纪录，也就是说如果跳转没失败的话，就会纪录这个人到了这里办了什么事。路由beforeEnter:做的事跟全域beforeEach一样，只是直接放在指定的路由里，我的想像就是银行里的大金库，不是人人都能去，应该只有高层才到得了，去到那就会有beforeEnter等着查验你的身分，闲杂人等只能乖乖地离开元件
有时A单位跟B单位因为有重叠的业务，所以会使用同一个小金库(同一元件)，所以从A单位转到B单位(路由被更新了)，但对到的是同一个实体元件时，这时就可以出动下面三个hooks共同管理。beforeRouteEnter:路由尚未进入该元件时触发，比较特别的是他跟上次Lifecycle提及的beforeCreate一样没有this，因为元件还没有被建立，但他可以用next取得实体。做的事也不外乎跟上面那些守卫一样，身份验证，数据加载以及路由重新导向。beforeRouteUpdate:路由被改变，但元件本身是同一个的时候被触发，通常用于数据重新加载，因为使用对象不同，看的文件会有所差异，例如外汇进出两个单位（我乱讲的，没在银行待过XD只是让自己好理解）beforeRouteLeave: 当路由要离开时自动触发，通常用在询问使用者是否真的要跳转到其他路由，就是你要关金库前，守卫会问你：你确定事情都处理妥当了吗？心得
在怕儿子随时起来的时间压力下赶完了这篇，但有写有差，我脑袋里每个守卫都已经搭上自己该有的长相XD，负责身份验证的最好是个凶神恶煞人人怕，数据加载的就是一板一眼会计脸，好爱幻想喔我，哈哈！写到这，我的儿子醒来催我他饿了，希望他等等吃了不要吐，快快好起来呀～参考资料Navigation Guards4-4 路由守卫（Navigation Guards）不只懂 Vue 语法：试解释如何使用导航守卫？号外：工商一下，Udemy大特价，只有今天，有需要的人可以赶快去买喔！我追的工程师作家推荐下面这个，有兴趣可参考The Complete 2024 Web Development Bootcamp