vue-router导航钩子执行顺序

vue-router的导航守卫实际和组件的生命周期都是同一类型的钩子函数，在一个特定时间内会触发。

导航守卫有三个类型，分别是全局的钩子（针对整个路由器实例），单个路由对象的钩子和组件内的钩子。

全局导航钩子

const router = new VueRouter({routes
})//全局前置守卫
router.beforeEach((to, from, next) => {console.log('beforeEach')next()
})// 全局解析守卫
router.beforeResolve((to, from, next) => {console.log('beforeResolve')next()
})// 全局后置钩子
router.afterEach((to, from) => {console.log('afterEach')
})

路由独享守卫

const routes = [{path: '/',name: 'Home',component: Home,// 路由独享守卫beforeEnter: (to, from, next) => {console.log('Home-beforeEnter')next()}},{path: '/about',name: 'About',component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),// 路由独享守卫beforeEnter: (to, from, next) => {console.log('About-beforeEnter')next()}}
]

组件内的守卫

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

一个实际项目中，如果涉及有导航切换，则钩子函数和生命周期的执行顺序应该是有两种情况：

Home 和 About 分别代表2个组件名

1）打开页面的任意一个页面，没有发生导航切换

beforeEach-->beforeEnter-->beforeRouteEnter-->beforeResolve-->afterEach-->beforeCreate-->created-->beforeMount-->mounted

2）导航切换(从一个路由切换到另外一个路由)，比如：路由 home 到路由 about

beforeRouteLeave-->beforeEach-->beforeEnter-->beforeRouteEnter-->beforeResolve-->afterEach-->beforeCreate-->created-->beforeMount-->beforeDestroy-->destroyed-->mounted

动态路由切换会触发 beforeRouteUpdate，比如：about/1-->about/2。

红线分割代表路由变化前后触发的所有钩子

vue-router导航钩子执行顺序相关推荐

vue 请求时方法执行顺序问题，异步请求无法同时处理多个接口，使用同步顺序执行：async/await使用
vue 请求时方法执行顺序问题,异步请求无法同时处理多个接口,使用同步顺序执行:async/await使用异步解决方案:async/await 多个await,同步拿到数据再处理多个接口处理拿到数 ...
VUE router 导航重复点击报错的问题解决两种方案
VUE router 导航重复点击报错的问题解决两种方案前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家 ...
vue 子父组件周期顺序_父组件和子组件生命周期钩子执行顺序是什么？
加载页面执行步骤 1.父组件:beforeCreate -> created -> beforeMount 2.子组件:beforeCreate -> created -> b ...
vue 父子组件mounted执行顺序
先看一下父子组件的 mounted created 等一些钩子函数的先后顺序 1 父组件:beforeCreate 2 父组件:created 3 父组件:beforeMount 4 子组件:befo ...
vue router name命名规范_vue-router使用
vue-router基本用法 vue-router的实现原理: 路由不同的页面也就是加载不同的组件. 路由的三个基本概念: router:它是一条路由,test按钮 => test内容,这是一条 ...
Vue Router路由模式的区别进程线程的区别
Vue Router hash模式和history模式的区别 hash模式url里面永远带着#号,我们在开发当中默认就是hash模式. 那么什么时候需要用到history模式呢? 肯定是用户觉得#号太 ...
Vue组件生命周期钩子和Vue-Router路由钩子的执行顺序
Vue组件生命周期钩子的执行顺序如下图所示链接:https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6% ...
vue进入页面执行的钩子函数_vue router的钩子函数总结
模块一:全局导航钩子函数 1.vue router.beforeEach(全局前置守卫) beforeEach的钩子函数,它是一个全局的before 钩子函数, (before each)意思是在每 ...
vue中父子组件先后渲染_vue父子组件钩子函数的执行顺序
加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount-& ...

vue-router导航钩子执行顺序

vue-router导航钩子执行顺序相关推荐

最新文章

热门文章