1、全局守卫
每次路由跳转 都会被触发,写在main.js文件
router.beforeEach((to,from,next) => {
//全局前置守卫,当一个导航触发时,全局前置守卫按照创建顺序调用
//数据校验时,非常有用
next()
})
router.beforeResolve((to,from,next) => {
next()
})
router.afterEach((to,from) => {
//全局后置钩子
//这个方法没有next参数
})
2、路由独享的守卫
写在配置里
const router = new VueRouter({
routes:[
{
path: '/foo',
component: foo,
//在进入这个路由之前调用
beforeEnter:(to,from,next) => {
}
}
]
})
3、组件内的守卫
const Foo = {
template:`...`,
beforeRouteEnter(to,from,next){
//在渲染该组件的对应路由被 confirm 前调用
//不!能!获取组件实例的 `this`
//因为当守卫执行前,组件实例还没被创建
},
beforeRouteUpdate(to,from,next){
//在当前路由改变,但是该组件被复用时调用
//举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候
//可以访问组件实例 `this`
},
beforeRouteLeave(to,from,next){
//导航离开该组件的对应路由时调用
//可以访问组件实例 `this`
//通常用来禁止用户在还未保存修改前突然离开,该导航可以通过 next(false)来取消
}
}
此外今天突然被问起什么是事件委托,当时只是把怎么用给回答出来了,但是并不知道他的原理,现在把他稍微总结一下
1、什么是事件委托
事件委托就是利用冒泡的原理,将事件加到父元素或祖先元素上,触发执行效果。运用了事件冒泡的原理
2、事件委托的优点
1)提高js性能,大量减少内存占用,减少事件注册。
2)动态监听,使用事件委托可以自动绑定动态添加的元素,即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件
3、事件委托的作用
1)支持为同一个DOM元素注册多个同类型事件
2)可将事件分为事件捕获和事件冒泡机制
4、事件捕获和事件冒泡机制
1)事件捕获
当一个事件触发后,从window对象触发,不断经过下级节点,直到目标节点,在事件到达目标节点的过程就是捕获阶段。所有经过的节点都会触发对应的事件
2)事件冒泡
当事件到达目标节点后,会沿着捕获阶段的路线原路返回,同样,所有经过的节点,都会触发对应的事件