Vue Router导航守卫

最新推荐文章于 2025-03-05 13:05:53 发布

原创最新推荐文章于 2025-03-05 13:05:53 发布 · 238 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue笔记专栏收录该内容

15 篇文章

订阅专栏

本文主要介绍了Vue的路由导航守卫，包括全局前置守卫beforeEach、全局解析守卫beforeResolve、全局后置钩子afterEach和路由独享守卫beforeEnter。导航守卫可在路由跳转时进行操作或保护，如检测未登录用户强行进入网站，将其跳转至登录页。

导航守卫就是在路由跳转的时候进行一些操作或保护。比如一个用户直接修改URL进入管理页面，但是导航守卫检测到这个行为，把路由跳转到登录页面，让他进行登录。

导航解析

beforeRouteLeave守卫
全局守卫beforeEach
beforeRouteUpdate守卫
beforeEnter守卫
beforeRouteEnter守卫
beforeResolve守卫
afterEach守卫

全局前置守卫beforeEach

router.beforeEach是一个全局前置守卫，即在路由跳转之前执行。它有3个参数：to,from,next.

to:前往的路由
from:从哪个路由来
next:是否让路由通过，next()表示让路由跳转，next(‘/login’)表示让路由跳转到登录页，和router.push('/login')一样

下面来模仿一个真实的网站路由守卫，我们都知道一般的网站都要登录才能进入，登录之后一段时间内cookies会记住你的信息，让你不必登录直接进入。但是如果没有登录，通过直接修改URL强行进入网站，路由守卫这时就起作用了，它检测到你没有登录就会让你跳转到登录页。

import {createWebHistory,createRouter,createWebHashHistory} from 'vue-router'
import Cookies from 'vue-cookies'
const routes=[
  {path: '/login',component:()=>import('../../components/Login.vue')},
  {path: '/home',component:()=>import('../../components/Home.vue')},
]
const router=createRouter({
  history: createWebHistory(),
  routes
})

router.beforeEach((to,from,next)=>{
  // userinfo是自己在定义cookies起的名字 如果没能拿到里面的信息说明没有登录
  const userinfo=Cookies.get('userinfo')
  if(!userinfo&&to.path!='/login') {
      next('/login') //和router.push('/login')一样 前往登录页
  }else {
      next() //登录了可以跳转到其他页面
  }
})
export default router

结果如下：可以看到我想通过改变URL来进入Home这个页面，但它还是会跳转到登录页

全局解析守卫beforeResolve

router.beforeResolve和router.beforeEach类似，官方文档说区别在于所有的组件内守卫和异步路由组件被解析之后解析守卫被调用。并不是很理解这句话，反正在beforeRouteEnter之后在afterEach之前被调用。

全局后置钩子afterEach

全局后置钩子afterEach的作用是进行一些辅助性功能，例如在路由跳转之后进行弹框提醒或者更改页面标题等。它是在页面跳转之后调用，参数中没有next。

router.afterEach((to,from)=>{
  if(to.path=='/login') alert('请进行登录')
})

路由独享守卫beforeEnter

上面的都是在全局配置的守卫，还可以在配置routes的时候配置beforeEnter守卫。beforeEnter只在进入路由时触发，不会在params、query和hash改变时触发，从/user/001跳转到/user/002不会触发，从/user/2#info跳转到/user/2#post也不会触发。

还有一些守卫这里就不再介绍了，很多都是不怎么用的，用的最多的是beforeEach和afterEach了。