了解vue-router 路由守卫的基本使用

已于 2022-03-03 10:42:50 修改
阅读量312 收藏
点赞数
分类专栏： vue 文章标签： vue javascript js
于 2021-04-01 16:01:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_41402809/article/details/115376272
版权
本文介绍了导航守卫的概念，它是路由跳转过程中可插入的钩子函数，可用于执行特定任务。文章详细阐述了全局守卫、组件内守卫及单个路由独享守卫的使用场景及其放置位置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、路由守卫是什么

导航守卫就是路由跳转前、中、后过程中的一些钩子函数。
在这个函数中，你可以操作一些其他的事件，这就是导航守卫。

包括全局守卫、组件内的、单个路由独享三种

 
 

具体这三个应该写在哪里 ，如下:
  1. 全局守卫

    写在main.js中：
    在这里插入图片描述

  2. 组件内守卫
    写在组件里面中：

    在这里插入图片描述

  3. 路由守卫

    写在路由配置文件中
    在这里插入图片描述

解密！Vue路由守卫的使用
关注我！带你一路 "狂飙" 到底！
08-21 6329
/ 在渲染该组件的对应路由被 confirm 前调用// 不！能！获取组件实例 `this`// 因为当守卫执行前，组件实例还没被创建},// 在当前路由改变，但是该组件被复用时调用// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。// 可以访问组件实例 `this`},// 导航离开该组件的对应路由时调用。
前端Vue篇之Vue-router 导航守卫有哪些、Vue-router 路由钩子在生命周期的体现、Vue-router跳转和location.href有什么区别
星辰迷上大海的博客
03-06 1990
Vue Router 中的导航守卫包括 beforeEach、beforeResolve、afterEach 和路由独享守卫 beforeEnter。这些守卫允许您在路由切换前、解析完成后和路由切换后执行自定义逻辑，比如权限验证、全局加载状态等。
vue页面内监听路由变化
anda9128的博客
07-17 1064
beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不！能！获取组件实例 `this` // 因为当钩子执行前，组件实例还没被创建 }, beforeRouteUpdate (to, from, next) { // 在当前路由...
Vue中路由守卫的使用
A32626231165165的博客
03-22 1083
该文章摘录了项目中一些路由守卫的使用和介绍，如全局前置路由守卫搭配token的使用，路由独享守卫和组件内守卫的介绍
vue路由守卫的基本使用
rbgg_mp的博客
11-23 531
路由守卫 又叫路由钩子，路由守卫，路由卫士，路由拦截 为什么要有路由守卫？ 通俗点就是帮你看门的，你得有凭证才能让你进。 举个栗子：唐僧要去西天取经，每过一个国家，都要被国王呀，守门人啊，各种人问：请问施主你从哪里来，要往何处去？ 这时候唐僧再帅他也得告诉人家：贫僧自东土大唐而来,去往西天拜佛求经去的。 当然说这么句话也不好使，说了他得有凭证，那么通关文牒出示了，这个国王阿，守门人才会告诉你下一步该怎么做。 如果你确定让国王看见唐朝皇帝的证明（通关文牒），那么肯定就会让你进入，或者通过这个国家并且好吃
Vue-router中路由守卫的用法
李公子的博客
08-15 8586
作用：对路由进行权限控制 分类：全局守卫、独享守卫、组件内守卫 全局守卫: 可以使用router.beforeEach注册一个全局前置守卫： 全局前置守卫：初始化时执行、每次路由切换前执行 可以使用router.afterEach注册一个全局后置守卫： 全局后置守卫：初始化时执行、每次路由切换后执行 守卫中的参数： to: Route: 即将要进入的目标（路由对象） from: Route: 当前导航正要离开的路由 ...
vue3.x+vite+ts+vue-router@4.x 路由使用demo
07-24
8. **路由守卫**：Vue Router 提供了多种类型的导航守卫，如全局前置守卫、组件内守卫和路线独享守卫，用于在导航发生时执行条件判断或异步操作。 9. **路由元信息（meta）**：可以为每个路由定义 meta 字段，用来...
uniapp中的一个完全相似Vue-router的路由插件
01-20
而 uni-simple-router 是一个专为 uni-app 设计的轻量级路由插件，它的设计思想与 Vue-router 非常相似，旨在简化 uni-app 中的路由配置。 ### 1. 安装和引入 uni-simple-router uni-simple-router 的安装有三种...
uni-simple-router实现简单的路由守卫
04-21
首先，我们需要了解路由守卫的基本概念。在Web开发中，路由守卫是一种机制，允许我们在页面跳转前或后执行某些操作，如验证用户权限、处理数据等。在uni-simple-router中，路由守卫主要分为全局守卫和组件级别的守卫...
浅谈vue-router路由切换 组件重用挖下的坑
10-16
在Vue.js应用中，路由管理通常使用vue-router来实现，它允许我们定义多个路由并根据URL的变化渲染不同的组件。然而，当两个路由指向同一个组件时，vue-router会复用组件以提高性能，但这可能导致组件的一些状态无法...
vue 路由守卫(导航守卫)及其具体使用
10-15
主要介绍了vue 路由守卫(导航守卫)及其具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue路由守卫使用
W_Zhulin的博客
06-16 506
vue路由钩子函数： 路由的钩子函数总结有6个 全局的路由钩子函数：beforeEach、afterEach vue router.afterEach（全局后置守卫） router.beforeEach 是页面加载之前，router.afterEach是页面加载之后 单个的路由钩子函数：beforeEnter 组件内的路由钩子函数：beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate 参数都为 (to,from,next) to: (Route路由对象) 即
vue路由守卫的使用
前端菜鸡的博客
09-17 1276
使用路由守位我们需要使用vuex来存放全局的用户信息 ①存在全局用户信息 1.首先展示我的项目路径 2.store/index.js文件内容如下： 这里主要是引入一些文件，以及进行挂载 import Vue from 'vue' import Vuex from 'vuex' import state from './state' import mutations from './mutatio...
Vue 路由守卫的使用
weixin_41434267的博客
06-18 292
路由守卫一般用于 校验用户是否登入 请看下列代码 /orderDetailMap 表示我需要保护的路由 添加了一个 meta 作为标识符
Vue导航路由守卫的使用
前端与计算机相关知识的分享，博主的qq523235674
01-12 243
通过获取本地sessionStorage判断用户是否有权限进入除登录以外的页面 router.beforeEach((to, from, next) => { if (to.path === '/login') return next(); const token_str = window.sessionStorage.getItem('token'); if (!token_str) return next('/login'); next(); }) ...
vue路由守卫的使用介绍
qq_45785548的博客
01-12 610
导航守卫其实也是路由守卫，也可以是路由拦截，我们可以通过路由拦截，来判断用户是否登录，该页面用户是否有权限浏览， 导航守卫分为：全局守卫组件内的守卫路由独享的守卫完整的导航解析流程 全局守卫 //全局守卫有三种: //全局前置守卫 router.beforeEach（to，from， next） router.beforeEach((to, from, next) => { console.log(to) => // 到哪个页面去？ console.log(from) =&gt
vue中路由守卫及运用
nick_zhang的博客
10-20 1894
1.全局路由守卫 (1)全局前置守卫 import router from './router' //to：即将要进入的目标路由对象 //from：当前导航正要离开的路由 //next：执行下一步 router.beforeEach((to, from, next) => { /* 路由发生变化修改页面title */ if (to.meta.title) { document.title = to.meta.title } next() }) (2)全局解析守卫 与全局前
vue 路由守卫(导航守卫)及其具体使用_vue.js
qq_70703397的博客
03-01 451
vue 路由守卫(导航守卫)及其具体使用_vue.js
vue-router 路由守卫
最新发布
03-11
### Vue-Router 路由守卫的使用方法 #### 全局前置守卫 Vue Router 提供了多种方式来实现路由导航期间的操作控制。全局前置守卫通过`router.beforeEach`注册，在每次路由切换前执行，可以用于权限验证等场景[^1]。 ```javascript const router = new VueRouter({ /* ... */ }) router.beforeEach((to, from, next) => { // to and from are Route Object console.log(to.path); next(); }) ``` #### 全局解析守卫 不同于全局前置守卫的是，全局解析守卫(`router.beforeResolve`)会在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后调用[^2]。 ```javascript router.beforeResolve((to, from, next) => { // similar usage as beforeEach next() }) ``` #### 全局后置钩子 这种类型的钩子不会接收`next`函数也不会改变导航本身，它主要是用来做某些清理工作或者记录日志[^3]。 ```javascript router.afterEach((to, from) => { // do something after route changed but not affecting the navigation. }) ``` #### 单个路由独享守卫 定义于特定路由配置对象内部，仅对该条目生效，适合处理页面特有的逻辑判断。 ```json { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // custom guard logic here... } } ``` #### 组件内的守卫 这些是在组件实例中定义的方法，它们允许更细粒度地管理进入/离开某个视图的行为。 ```javascript export default { name: 'SomeComponent', beforeRouteEnter(to, from, next){ // called before entering this component's view }, beforeRouteUpdate(to, from, next){ // called when params or query changes while staying on same page }, beforeRouteLeave(to, from, next){ // called just before leaving this component's view } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值