可以在路由组件内直接定义路由导航守卫(传递给路由配置的)

可用的配置 API

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

const UserDetails = {template: `...`,beforeRouteEnter(to, from) {},beforeRouteUpdate(to, from) {},beforeRouteLeave(to, from) {},
}

beforeRouteEnter 守卫不能访问 this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。
不过，可以通过传一个回调给 next 来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数：

beforeRouteEnter (to, from, next) {next(vm => {// 通过 `vm` 访问组件实例})
}

注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调，因为没有必要了。

beforeRouteUpdate (to, from) {// just use `this`this.name = to.params.name
}

这个 离开守卫 通常用来预防用户在还未保存修改前突然离开。该导航可以通过返回 false 来取消。

beforeRouteLeave (to, from) {const answer = window.confirm('Do you really want to leave? you have unsaved changes!')if (!answer) return false
}

完整的导航解析流程

官方提供：

导航被触发。
在失活的组件里调用 beforeRouteLeave 守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫(2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

Vue Router 组件内的守卫、导航解析流程相关推荐

当使用this.$router.back()或者this.$router.go(-1)返回上一页时，搭配组件内路由守卫，屏幕闪烁和跳转页面错误问题
当使用this.$router.back()或者this.$router.go(-1)返回上一页时,搭配组件内路由守卫,屏幕闪烁和跳转页面错误问题问题描述:项目有这个需求,当页面的输入框内容填完之后 ...
全局路由守卫，独享路由守卫，组件内路由守卫
路由守卫: 1.作用:对路由进行权限控制 2.分类:全局路由守卫,独享路由守卫,组件内路由守卫 3.全局路由守卫:在router=>index.js const routes =[ {path: ...
vue路由安全守卫（组件内路由守卫）
组件内部的路由守卫基本形式: export default {name: "Cart",beforeRouteEnter(to, from, next) {// 进入当前组件当 ...
vue 一个组件内多个弹窗_论如何用Vue实现一个弹窗-一个简单的组件实现
前言最近在使用element-ui框架,用到了Dialog对话框组件,大致实现的效果,跟我之前自己在移动端项目里面弄的一个弹窗组件差不太多.然后就想着把这种弹窗组件的实现方式与大家分享一下,下面本文 ...
vue 一个组件内多个弹窗_使用vue实现各类弹出框组件
简单介绍一下vue中常用dialog组件的封装: 实现动态传入内容,实现取消,确认等回调函数. 首先写一个基本的弹窗样式,如上图所示. 在需要用到弹窗的地方中引入组件: import dialogBa ...
vue在组件内实现对图标的显示与隐藏
在项目中需要在页面A调用页面B.页面B在页面A被调用时,肯定需要实现只读,禁用所有功能.因为页面B上的一个按钮是自己写的,没有disable功能,只能根据条件把他隐藏掉. 在使用时发现语句有问题,在所 ...
Vue Router路由管理器
目录: 相关理解基本路由几个注意事项嵌套(多级)路由路由的query参数命名路由路由的params参数路由的props配置路由跳转的replace方法编程式路由导航缓存路由组件 a ...
Vue 路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
一.全局守卫 1. router.beforeEach((to,from,next)=>{}) 2. 回调函数中的参数,to:进入到哪个路由去,from:从哪个路由离开,next:函数,决定是否 ...
导航守卫之组件内守卫及后置钩子
一.路由守卫 1.只有点击路由Admin时才会打印消息,并处于点击前的页面 2.只有点击路由Admin时才会打印消息,显示的是点击后的页面:但如果是next(false)则页面不会跳转 3.路由独享守 ...

Vue Router 组件内的守卫、导航解析流程

可用的配置 API

完整的导航解析流程

Vue Router 组件内的守卫、导航解析流程相关推荐

最新文章

热门文章