Vuerouter前后挂钩功能的区别

当路线跳跃时，我们需要一些权限判断或其他操作。这时，我们需要使用路由的钩子函数。

定义：路由钩子主要是为用户在路由变化时做一些特殊处理而定义的功能。

一般来说，vue中有三种钩子，两种功能1、全局钩子2、某条路线的钩子3、组件内的钩子

两种功能：

1.vue。beforeeach(函数(to，form，next) {})/*在跳转前执行*/

2.vue。每一个(函数(to，form)后)/*跳转后判断*/

全局钩子函数

顾名思义，它是一个全局有效的函数

router.beforeEach((to，from，next)={ let token=router . app . $ storage . fetch(' token ')；让NeedAuth=to . matched . some(item=item . meta . log in)；if(！token needAuth)返回next({ path : '/log in ' })；next()；});beforeEach每个函数有三个参数：

To:router的传入路由对象from:当前导航传出路由next:Function，并在管道中执行一个钩子。如果执行完成，则确认导航状态；否则，为假，终止导航。afterEach函数不需要传递next()函数

路线的挂钩功能

顾名思义，它是按照一定路线编写的函数，本质上与组件内的函数相同。

const router=new vue router({ route :[{ path : '/log in '，component: login，beforeenter3360 (to，from，next)={//.}，beforeleave 3360 (to，from，next)={//。

注意：这是一个路由组件！

工艺路线组件属于组件，但组件不等于工艺路线组件！所谓的路由组件：直接在路由器中的组件上定义的组件。例如：

调用子组件中路由的hook函数时，Varroutes=[{path:'/home '，component: home，name:' home'}]无效。

官方文件对其定义如下：

以下路由导航挂钩可以直接在路由组件中定义

before route enter before route update(2.2中增加)beforeRouteLeave在这里，我们简单说一下hook函数的用法：它等于数据、数据、方法。

before route使用vue-router before每个钩子时，您可能会遇到以下问题：

源代码：

路由器。beforeeach ((to，from，next)={//判断登录状态的一个简单例子：varuserinfo=window . local storage . getitem(' token ')；if(UserInfo){ next()；} else { next('/log in ')；}})然后你会发现以下错误：死循环错误

解决方案：

router.beforeEach((to，from，next)={ var userInfo=window . local storage . getitem(' token ')；//获取浏览器缓存的用户信息if(user info){//如果有，直接进入首页next()；} else {if(to.path=='/login'){ //如果是登录页面路径，直接next()next()；} else {//或跳转登录；下一步('/log in ')；}}})解决方案：

排除此时地址=转移地址的情况，避免死循环。问题很简单，但不小心就会入坑。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。