如何正确的使用vue-router钩子函数 - 行业资讯 - 肥雀云

　　介绍

这篇文章给大家介绍如何正确的使用vue-router钩子函数,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

vue路由钩子大致可以分为三类:

<强> 1。全局钩子

主要包括beforeEach和aftrEach,

<强> beforeEach函数有三个参数:

<李>

:路由器即将进入的路由对象

<李>

:当前导航即将离开的路由

<李>

:函数,进行管道中的一个钩子,如果执行完了,则导航的状态就是证实(确认的),否则为false,终止导航。

<强> afterEach函数不用传下一个()函数

这类钩子主要作用于全局,一般用来判断权限,以及以及页面丢失时候需要执行的操作,例如:

//使用钩子函数对路由进行权限跳转　　router.beforeEach(下),,,,,=祝辞,{ 　　const 才能;role =, localStorage.getItem (& # 39; ms_username& # 39;); 　　如果才能(! role ,,, to.path !==, & # 39;/登录# 39;){ 　　接下来,,,(& # 39;/登录# 39;); 　　}才能else 如果(to.meta.permission) { 　　,,,//,如果是管理员权限则可进入,这里只是简单的模拟管理员权限而已　　,,,role ===, & # 39;行政与# 39;,?,下一个(),:,接下来(& # 39;/403 & # 39;); 　　}{其他才能　　,,,//,简单的判断IE10及以下不进入富文本编辑器,该组件不兼容　　,,,如果(navigator.userAgent.indexOf (& # 39; msie # 39;),祝辞,1,,,,to.path ===, & # 39;/编辑# 39;){ 　　,,,,Vue.prototype。$警报(& # 39;vue-quill-editor组件不兼容IE10及以下浏览器,请使用更高版本的浏　　,,,,,览器查看& # 39;,,& # 39;浏览器不兼容通知& # 39;,,{ 　　,,,,,,,confirmButtonText:, & # 39;确定& # 39; 　　,,,,,}); 　　还有,,,}{ 　　,,,,,下一个(); 　　,,,} 　　,,} 　　})

<强> 2。单个路由里面的钩子

主要用于写某个指定路由跳转时需要执行的逻辑

{ 　　,,,,,,,,,路径:,& # 39;/仪表盘# 39; 　　,,,,,,,,,组件:,resolve =祝辞,要求((& # 39;. ./组件/页面/Dashboard.vue& # 39;],,解决), 　　,,,,,,,,,元:,{,标题:& # 39;系统首页& # 39;,}, 　　,,,,,,,,,beforeEnter:,(下),,,,,=祝辞,{ 　　,,,,,,,,,,}, 　　,,,,,,,,,beforeLeave:,(下),,,,,=祝辞,{ 　　,,,,,,,,,} 　　,,,,,,,},

<强> 3。组件路由

主要包括beforeRouteEnter和beforeRouteUpdate, beforeRouteLeave,这几个钩子都是写在组件里面也可以传三个参数(下),从作用与前面类似。

, beforeRouteEnter(下),,,,,{
　　下才能(vm =祝辞,{
　　,,if  (
　　,,,vm。美元route.meta.hasOwnProperty (& # 39; auth_key& # 39;),,,
　　,,,vm。route.meta.auth_key 美元;!=,& # 39;& # 39;
　　,,),{
　　,,,if  (! vm.hasPermission route.meta.auth_key美元)(vm), {
　　,,,vm。美元router.replace (& # 39;/admin/noPermission& # 39;)
　　,,,}
　　,,}
　　})才能
　　},

关于如何正确的使用vue-router钩子函数就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。