Vue路由守卫（全局路由守卫、路由独享守卫、组件内部守卫）

た入场券 2022-11-26 05:57 438阅读 0赞

## 一、全局守卫（两种，在main.js文件下设置） ##

第一种：router.beforeEach((to,from,next)=>\{\})

router.beforeEach((to,from,next)=>{
    
      if(to.path == '/login' || to.path == '/register'){
    
        next();
    
      }else{
    
        alert('您还没有登录，请先登录');
    
        next('/login');
    
      }
    
    })

\#回掉函数中的参数

\*to：进入到那个路由去

\*from:从那个路由来的（上一个路由）

\*next：顺延，next()---（放行）---next('/login')---（不放行，让他跳转到login页面）--函数，决定是否展示你要看到的路由页面

第二种：router.afterEach((to,from)=>\{\})

\#只有两个参数，to：进入到哪个路由去，from：从哪个路由离。

\#如下，每次切换路由时，都会弹出alert，点击确定后，展示当前页面。

router.afterEach((to,from)=>{
    
      alert("after each");
    
    })

## 二、路由独享守卫 ##

\#在router文件夹下index.js文件 和path同级。

beforeEnter((to,from,next)=>\{//里边的用法和全局一样\})

## 三、组件内部守卫 ##

\#在组件.vue内部写和 data()\{\}同级

//1.组件进入之前的守卫
    
    beforeRouteEnter(to,from,next){//和全局使用一样}    //生命周期还没开始，所以这个函数没有this
    
    //2.组件更新守卫
    
    beforeRouteUpdate(to,from,next){//和全局使用一样}  //  "/:id"动态路由发生变化，页面没有重新加载，触发更新守卫
    
    //3.组件离开守卫
    
    beforeRouteLeave(to,from,next){//和全局使用一样}    //在离开当前路由的时候触发，有this

发表评论取消回复

表情：

评论列表（有 0 条评论，438人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue——路由守卫（全局前置路由守卫beforeEach、全局后置路由守卫router.afterEach、独享路由守卫beforeEnter、组件内路由守卫）

作用：对路由进行权限控制分类：全局守卫、独享守卫、组件内守卫目录一、全局前置路由守卫router.beforeEach（切换之前调用，to、from、next参数）

- 日理万妓/ 2024年04月06日 12:00/ 0 赞/ 67 阅读

相关路由导航守卫

路由导航守卫有哪些： > 全局守卫 > 组件内守卫 > 独享守卫 1.全局守卫 beforeEach 全局前置守卫 beforeResolve 全局解

我不是女神ヾ/ 2024年02月20日 12:12/ 0 赞/ 60 阅读

相关 Vue 路由导航守卫

为路由对象添加 beforeEach 导航守卫 const router = new VueRouter({ ... }) router.befo

女爷i/ 2023年01月09日 14:28/ 0 赞/ 146 阅读

相关 react 路由守卫

原理 `react路由守卫` 是通过 `高阶组件(HOC)` 实现的因此针对不同的情况就要封装不同的 `HOC` 接下来展示一个有关登录权限的路由守卫例子 demo

迈不过友情╰/ 2022年12月21日 00:54/ 0 赞/ 246 阅读

相关全局路由守卫和路由

import { createRouter, createWebHistory, RouteRecordRaw, cr

逃离我推掉我的手/ 2022年12月09日 11:52/ 0 赞/ 270 阅读

相关 Vue路由守卫（全局路由守卫、路由独享守卫、组件内部守卫）

一、全局守卫（两种，在main.js文件下设置）第一种：router.beforeEach((to,from,next)=>\{\}) router.befo

た入场券/ 2022年11月26日 05:57/ 0 赞/ 439 阅读

相关 Vue 路由导航守卫(全局守卫、路由独享守卫、组件内守卫)

什么是路由守卫？路由守卫就是路由跳转的一些验证，比如登录鉴权（没有登录不能进入个人中心页）等等等。路由守卫分为三大类： 1. 全局守卫：`beforeEac

我就是我/ 2022年11月11日 06:01/ 0 赞/ 247 阅读

相关 vue注册全局路由守卫

router.js import Vue from 'vue' import Router from 'vue-router' Vue.use(Rou

曾经终败给现在/ 2022年11月01日 05:45/ 0 赞/ 206 阅读

相关 vue系列_vue-Router_组件内部的路由守卫（局部路由守卫）01

如果你对vue的路由基础了解，就朝下看，不然不了解，请看[vue系列\_vue-Router入门和理解][vue_vue-Router] 。一、概念：路由守卫：就是

我不是女神ヾ/ 2021年11月16日 12:06/ 0 赞/ 347 阅读

相关 vue 路由守卫

在main.js中,通过引入路由文件后,通过该对象使用相当于路由的生命周期 1、全局前置守卫 (1)router.beforeEa

怼烎@/ 2021年07月24日 19:41/ 0 赞/ 564 阅读