Vue使用路由钩子拦截器beforeEach和afterEach监听路由
网络编程 2021-07-04 14:07www.168986.cn编程入门
这篇文章主要介绍了Vue使用路由钩子拦截器beforeEach和afterEach监听路由,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
在路由跳转的时候，我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。
定义路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。
总体来讲vue里面提供了三大类钩子，两种函数 1、全局钩子 2、某个路由的钩子 3、组件内钩子
两种函数
1. router.beforeEach(function(to,form,next){}) /在跳转之前执行/
2. router.afterEach(function(to,form)}{}) /在跳转之后判断/
全局钩子函数
顾名思义，它是对全局有效的一个函数
// router.jsconst router = new Router({
routes: [
{
path: '/',
name: 'sideBar',
ponent: sideBar,
children:[
{
path:'/',
name:'sort',
ponent:sort
},
{
path:'/addNewSort',
name:'addNewSort',
ponent:addNewSort
},
{
path:'/notSend',
name:'notSend',
ponent:notSend
},
{
path:'/sended',
name:'sended',
ponent:sended
},
}
]
})
router.beforeEach((to,from,next)=>{
// console.log("to:",to); // router即将进入的路由对象
// console.log("from:",from); // 当前导航即将离开的路由
// console.log("next:",next); // Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。
if(to.name=='notSend'){
next({
name:'sort'
})
return
}
next()
})
export default router
某个路由的钩子函数
顾名思义，它是写在某个路由里头的函数，本质上跟组件内函数没有区别。
// router.jsconst router = new VueRouter({
routes: [
{
path: '/login',
ponent: Login,
beforeEnter: (to, from, next) => {
// ...
},
beforeLeave: (to, from, next) => {
// ...
}
}
]
})
路由组件的钩子
可以在路由组件内直接定义以下路由导航钩子
// .vuebeforeRouteEnter beforeRouteUpdate (2.2 新增) beforeRouteLeave
这里简单说下钩子函数的用法它是和data,methods平级的。
beforeRouteLeave(to, from, next) {
next()
},
beforeRouteEnter(to, from, next) {
next()
},
beforeRouteUpdate(to, from, next) { // 用于相同路由组件的的参数更新
next()
},
data:{},
method: {}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
上一篇：vue 封装面包屑组件教程 下一篇：小程序实现密码输入框