Vue 路由钩子函数

路由钩子函数分为三种:

全局前置守卫 router.beforeEach全局解析守卫 router.beforeResolve全局后置钩子 router.afterEach路由独享的守卫 beforeEnter组件内的守卫 beforeRouteEnter   beforeRouteUpdate    beforeRouteLeave

1：全局钩子：

全局前置守卫 `beforeEach`

const router = createRouter({ ... })router.beforeEach((to, from) => {// ...// 返回 false 以取消导航return false
})

全局解析守卫 beforeResolve

这和 router.beforeEach 类似，因为它在 每次导航时都会触发，但是确保在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被正确调用。

router.beforeResolve(async to => {if (to.meta.requiresCamera) {try {await askForCameraPermission()} catch (error) {if (error instanceof NotAllowedError) {// ... 处理错误，然后取消导航return false} else {// 意料之外的错误，取消导航并把错误传给全局处理器throw error}}}
})

router.beforeResolve 是获取数据或执行任何其他操作（如果用户无法进入页面时你希望避免执行的操作）的理想位置。

2：单个路由里面的钩子： beforeEnter

const routes = [{path: '/users/:id',component: UserDetails,beforeEnter: (to, from) => {// reject the navigationreturn false},},
]

beforeEnter 守卫 只在进入路由时触发，不会在 params、query 或 hash 改变时触发。例如，从 /users/2 进入到 /users/3 或者从 /users/2#info 进入到 /users/2#projects。它们只有在 从一个不同的 路由导航时，才会被触发。

你也可以将一个函数数组传递给 beforeEnter，这在为不同的路由重用守卫时很有用：

3: 组件路由：beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave

const UserDetails = {template: `...`,beforeRouteEnter(to, from) {// 在渲染该组件的对应路由被验证前调用// 不能获取组件实例 `this` ！// 因为当守卫执行时，组件实例还没被创建！},beforeRouteUpdate(to, from) {// 在当前路由改变，但是该组件被复用时调用// 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，// 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。// 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`},beforeRouteLeave(to, from) {// 在导航离开渲染该组件的对应路由时调用// 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`},
}

Vue 路由钩子函数相关推荐

before vue路由钩子_vue组件级路由钩子函数介绍，及实际应用
正如其名,vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消. 有多种方式可以在路由导航发生时执行钩子:全局的.单个路由独享的.或者组件级的. 一.全局钩子你可以使用 rout ...
vue组件级路由钩子函数介绍，及实际应用
正如其名,vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消. 有多种方式可以在路由导航发生时执行钩子:全局的.单个路由独享的.或者组件级的. 一.全局钩子你可以使用 rout ...
vue进入页面执行的钩子函数_深入理解Vue 的钩子函数
前言说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子( created , mounted ),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中 ...
vue进入页面执行的钩子函数_解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题...
项目需求:图片加载时,当鼠标滚动至当前图片进行加载并加上上滑特效,实现这个效果需要对文档文档滚动位置和图片的当前位置进行比较.但是mounted 钩子函数执行时img图片并未加载出来也就是占位为空,导 ...
“约见”面试官系列之常见面试题之第七十六篇之vue-router中的路由钩子函数基本用法（建议收藏）
vue-router中的路由钩子函数基本用法路由钩子函数分为三种类型如下: 第一种:全局钩子函数. router.beforeEach((to, from, next) => { consol ...
Vue的钩子函数是什么意思?Vue都有哪些钩子函数？
Vue的钩子函数是什么意思?Vue都有哪些钩子函数? Vue钩子函数就是指在一个Vue实例从创建到销毁的过程自动执行的函数. beforeCreate:在Vue实例创建之前执行. Created:在V ...
c语言中的钩子函数,生命周期（vue的钩子函数）
生命周期图示创建前,创建后,挂载前,挂载后,更新前,更新后,销毁前,销毁后 beforeCreate:function(){ console.log('1-beforeCreate 组件还未被创建' ...
Vue 路由知识三(过渡动画及路由钩子函数)
路由的过渡动画:让路由有过渡动画,需要在<router-view>标签的外部添加<transition>标签,标签还需要一个name属性. <transition nam ...
vue的钩子函数created以及mounted的示意(转载)
这是它的一个生命周期钩子函数,就是一个vue实例被生成后调用这个函数.一个vue实例被生成后还要绑定到某个html元素上,之后还要进行编译,然后再插入到document中.每一个阶段都会有一个钩子函数 ...

Vue 路由钩子函数

全局前置守卫 `beforeEach`

全局解析守卫 beforeResolve

Vue 路由钩子函数相关推荐

最新文章

热门文章

Vue 路由钩子函数

全局前置守卫 beforeEach

全局解析守卫 beforeResolve

Vue 路由钩子函数相关推荐

最新文章

热门文章

全局前置守卫 `beforeEach`