为什么要自造beforeEnter钩子函数？
看下问题场景：项目中有一单词列表页面，每个cell都会备注该单词是否已经掌握，点击cell进入详情页，可对该单词进行学习，并标记单词是否掌握，并且在详情页面中也可以通过点击前进 后退 按钮学习其他的单词。所以但我点击返回时，单词列表要展示所有单词用户掌握的最新情况。
最终的页面关系是这样的：
"color: #ff0000">构造beforeEnter钩子函数
依赖知识点：
- 路由：vue-router
- 混入：mixin
- 中央事件总线
1.创建一个中央事件总线
对于中央事件总线，简单理解，就是创建一个公共Vue实例（EventBus），在不同的地方使用相同实例触发EventBus.$emit('demo') 消息，在想要监听事件的位置使用公共Vue实例进行监听EventBus.$on('demo',() => {})。再说白点，就是有这么一个公共组件，它会再不同的地方发消息，又在不同的地方自己去监听消息。所以说消息的发送和接收都是它自己实现的，所以说我们称之为中央事件总线。
代码如下：libs/EventBus.js
import Vue from 'vue'; const EventBus = new Vue(); export default EventBus;
下面看下怎么使用
2.路由钩子函数beforeEach
通过beforeEach钩子函数，实现路由切换时触发相应组件的beforeEnter事件。
代码如下：router/index.js
import EventBus from '@/libs/EventBus';
router.beforeEach((to, from, next) => {
//如：EventBus.$emit('homeBeforeEnter');
EventBus.$emit(to.name + 'BeforeEnter');
if (to.matched.some(route => route.meta.isAuth)) {
...
next()
} else {
next()
}
})
3.创建全局混入对象
这里实现路由切换事件的监听和组件实例钩子函数beforeEnter的触发。
libs/beforeEnterMixin.js
import EventBus from './EventBus';
export default {
beforeCreate() {
//获取当前路由名称，与前面使用to.name对应
let vmName = this.$route.name;
if (!vmName) {
return;
}
// 当组件初始化时，先触发一次，后续将不再调用
this.$options.beforeEnter();
const beforeEnter = vmName + 'BeforeEnter';
//监听路由切换时触发的...BeforeEnter事件
//通过this.$options获取到实例中的beforeEnter钩子函数
//监听到...BeforeEnter事件后，触发钩子函数beforeEnter调用
EventBus.$on(beforeEnter, this.$options.beforeEnter);
},
//该函数在这里只作为占位，没有实际意义
beforeEnter() {}
};
对于该混入对象，使用全局或者局部混入都是可行的。
全局混入：main.js
import beforeEnterMixin from '@/libs/beforeEnterMixin'; Vue.mixin(beforeEnterMixin);
4.在组件中的使用
如：home.vue
<template>
<div>
首页
</div>
</template>
<script>
export default {
beforeEnter() {
console.log('首页 beforeEnter...');
},
created() {
console.log('首页 created...')
}
}
</script>
至此，我们的 beforeEnter 就完成了，可以做个demo自己测试下，目前本人在项目比较多的地方都会用到它。
在此附上以上代码的demo链接：https://github.com/chaoshenr/Vue-beforeEnter
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。