22/09/26 vue3,路由独享组件守卫，beforeEnter

已于 2022-09-26 18:13:25 修改
阅读量1.2k 收藏 1
点赞数
分类专栏： # vue3 文章标签： vue.js
于 2022-09-26 18:13:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Nighsloth/article/details/127058247
版权

背景：
商品B页面，跳转到商品详情C页面，从C页面返回到B页面，B页面要保留进度条数据。
从非C的其他页面跳转到B页面，都不需要使用进度条数据

C页面，路由配置beforeEnter
在这里插入图片描述

从B页面跳转到C页面存储数据
import { useRoute } from ‘vue-router’;
在这里插入图片描述

参考链接：
在这里插入图片描述

Vue Router路由独享的守卫

Vue路由守卫
weixin_46285310的博客
08-29 187
1.路由守卫 先说我的理解，路由守卫类似一个安保系统，要向进入园区，必须经过安保的同意，同意了就放行，继续操作，那么路由守卫也是一样的 包含 全局守卫 独享守卫 组件内守卫 1.1 全局守卫 应用于整个页面，处理对应的事件，分为前置守卫和后置守卫 to：进入到哪个路由去 from：从哪个路由离开 next：路由的控制参数，常用的有next(true)和next(false) <!--1.定义组件--> let comA ={ data(){},
DAY20240913 VUE:深入解析 Vue Router 局部路由守卫：路由独享与组件内部守卫的妙用与区别
weixin_52881828的博客
09-13 2218
局部路由守卫
YDOOK:vue3:vue-cli4: router进阶 beforeEach 全局路由守卫 关键用法
YDOOK
03-10 611
Python 光速入门 48：占位 - YDOOK
vue3 路由三类守卫：全局路由守卫（3个）、路由独享守卫（1个）、组件守卫（3个）
weixin_42946131的博客
03-06 1053
vue3 路由守卫
vue3 setup 使用 beforeRouteEnter 组件内路由守卫
桃李不言下自成蹊
05-30 9994
setup 中只有onBeforeRouteLeave、onBeforeRouteUpdate两个钩子函数， 没有beforeRouteEnter对应的钩子函数，所以无法在setup中直接使用
记录:vue3 组合式api页面内使用beforeRouteEnter 组件内前置守卫
m0_49827178的博客
09-21 4277
APP/h5/第三方h5 多端页面交互 来回套娃式跳转。返回上一级需要判断路由from参数。注意:当前组件需要暴露指定方法。
vue3中，在setup中使用beforeRouteEnter
m0_47984774的博客
05-18 2823
vue3中，在setup中使用beforeRouteEnter
Vue路由守卫之路由独享守卫
10-16
Vue Router 提供了多种类型的路由守卫，包括全局前置守卫、组件内守卫和路由独享守卫。在本例中，我们将重点讨论路由独享守卫 `beforeEnter`。 `beforeEnter` 是一个可以在路由配置中直接定义的守卫函数，用于在...
vue 导航守卫(二) 之 路由独享的守卫&组件内的守卫
Jana Jing的分享
11-04 1235
可以在路由组件内直接定义以下路由导航守卫： beforeRouteEnter beforeRouteUpdate(2.2 新增) beforeRouteLeave beforeRouteEnter beforeRouteEnter(to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不！能！获取组件实例 `this` // 因为当守卫执行前，组件实例还没被创建 }, beforeRouteEnter守卫不能访问...
Vue2：路由守卫实现权限管理之独享路由守卫
Brave_heart4pzj的博客
02-29 397
Vue
vue3在setup语法糖使用beforeRouteEnter
m0_63675054的博客
03-06 618
vue3在setup语法糖使用beforeRouteEnter
vue路由独享守卫beforeEnter
weixin_30500105的博客
04-15 2093
在某个路由中，使用beforeEnter()方法，参数是to,from,next 和全局路由守卫的用法是一样的 例子： import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) import Home from '../../view/Home.vue' import Test from '....
Vue--手把手教你撸一个 beforeEnter 钩子函数
weixin_34292924的博客
04-23 340
为什么要自造beforeEnter钩子函数？ ​ 看下问题场景：项目中有一单词列表页面，每个cell都会备注该单词是否已经掌握，点击cell进入详情页，可对该单词进行学习，并标记单词是否掌握，并且在详情页面中也可以通过点击前进 后退 按钮学习其他的单词。所以但我点击返回时，单词列表要展示所有单词用户掌握的最新情况。 最终的页面关系...
vue.3路由守卫
qq_35146107的博客
09-16 776
/ 独享路由守卫next()}else{console.log('无权查看');3.组件内守卫是指在组件内执行的钩子函数，类似于组件内的生命周期，相当于为配置路由的组件添加的生命周期钩子函数组件内守卫有三个参数。to:去哪里from:从哪里来next下一个。
vue3中使用路由守卫(简单易懂哦)
热门推荐
前端小白在前进的博客
05-07 1万+
vue3中使用路由守卫使用场景beforeEach （全局前置守卫）beforeEnter （路由独享守卫）beforeRouteEnter (组件内部守卫) 使用场景 我们在进行项目的实际开发中，可能会遇到一个问题：“如果我们没有登录的时候一些页面不能被访问该怎么去处理？”，这时候就需要我们的路由守卫了，路由守卫常用的有三种，全部在下方详细解释啦！ beforeEach （全局前置守卫） 全局前置守卫是配置在全局的路由js文件中 话不多说，直接上代码： router.beforeEach((to,fr
vue3路由（基本用法、路由守卫、动态路由）
weixin_50961467的博客
04-16 6642
这里做法是使用isReady方法，它返回一个 Promise，它会在路由器完成初始导航之后被解析，也就是说这时所有和初始路由有关联的异步入口钩子和异步组件都已经被解析。用于在组件中获取当前路由的信息，返回一个包含路由信息的对象。用于获取路由实例，可以通过它来进行一些动态的路由操作，比如跳转到新的路由。route中有一个配置项是meta，专门提供给我们，在meta项中配置自己的属性与值，可用于在守卫中的权限判断。2、在全局路由守卫中设置跳转规则（未登录则跳转到登录页，已登录跳转到首页或放行）
vue3：路由守卫（全局守卫、路由独享守卫、组件内守卫）
aaaa_aaab的博客
09-26 939
2、A.vue(商品详情) -> B.vue(确认订单) -> C.vue(支付成功后跳转订单详情) ->detail.vue(详情)这个时候我们需要使用beforeRouteEnter 来解决页面返回问题。1、order.vue(订单) -> detail.vue(详情)有些时候我们需要知道是从那一个页面跳转过来的。，记录下来方便日后学习。
vue3 vue-router 导航守卫 （五）
wxid_mtnujb6ipc0322的博客
12-05 633
在Vue 3中，导航守卫仍然是一个重要的概念，用于在路由切换时执行一些特定的逻辑。Vue Router提供了多个导航守卫，包括全局守卫、路由独享守卫和组件内守卫。可以在路由切换时执行一些特定的逻辑，例如身份验证、权限控制、数据加载等帮助你更好地控制整个应用程序的导航流程。
路由守卫gogo
天天的博客
09-22 264
beforeEach 我们以前用过，这里就不写了 beforeEnter 可以针对单个路由进行守卫 组件内守卫： 这里我们测试下beforeRouteEnter 组件内守卫： Index.vue <template> <div> <p>index pager</p> <ul> <li v-for="(course,index) in courses" :key="index">
vue3路由独享守卫
最新发布
03-28
### Vue3 中路由独享守卫的使用方法 在 Vue3 的 `vue-router` 版本中，独享路由守卫可以通过为特定路由定义 `beforeEnter` 守卫来实现。这种守卫仅适用于指定的路由，在该路由被访问前触发。 以下是详细的说明以及代码示例： #### 1. 配置独享路由守卫 通过在路由配置对象中添加 `beforeEnter` 属性，可以为某个具体的路由设置独享守卫。此属性是一个函数或者数组形式的多个函数[^2]。 ```javascript import { createRouter, createWebHistory } from &#39;vue-router&#39;; const routes = [ { path: &#39;/home&#39;, component: () => import(&#39;@/views/Home.vue&#39;), beforeEnter: (to, from, next) => { console.log(&#39;进入 /home 前触发&#39;); if (!isAuthenticated()) { alert(&#39;未授权访问!&#39;); next(&#39;/login&#39;); // 如果未登录，则重定向到登录页 } else { next(); // 否则继续加载目标页面 } }, }, ]; const router = createRouter({ history: createWebHistory(), routes, }); function isAuthenticated() { return false; // 这里可以根据实际逻辑判断用户是否已认证 } export default router; ``` 上述代码展示了如何为 `/home` 路由添加一个独享守卫。当尝试访问 `/home` 页面时，会先执行 `beforeEnter` 函数中的逻辑。 --- #### 2. 多个独享守卫的应用场景 如果需要在一个路由上应用多个独享守卫，可以将它们作为数组传递给 `beforeEnter` 属性。这样可以让不同的功能模块分别管理自己的验证逻辑。 ```javascript { path: &#39;/admin&#39;, component: AdminComponent, beforeEnter: [ (to, from, next) => checkUserPermission(to, from, next), (to, from, next) => logAccessAttempt(to, from, next), ], } ``` 在这个例子中，`checkUserPermission` 和 `logAccessAttempt` 是两个独立的功能函数，分别用于权限校验和记录访问日志。 --- #### 3. 独享守卫与其他守卫的区别 - **全局守卫**：作用于所有路由切换过程，通常用来处理通用逻辑（如导航进度条、全局错误捕获等）[^3]。 - **组件内守卫**：绑定在具体组件实例上的生命周期钩子（如 `beforeRouteEnter`, `beforeRouteLeave`），主要用于组件级别的数据预取或状态保存[^1]。 - **独享守卫**：只针对某一条或多条路由生效，适合做局部化的业务逻辑控制（如角色权限校验、表单提交确认等）。 --- #### 4. History 模式下的注意事项 如果项目启用了 `history` 模式而非默认的 `hash` 模式，则需要注意服务器端配置问题。因为 `history` 模式的 URL 不含 `#` 符号，直接请求这些路径可能会返回 404 错误。因此需确保后端能够正确转发所有前端路由至入口文件[^4]。 ```javascript // 使用 history 模式创建路由器实例 const router = createRouter({ history: createWebHistory(process.env.BASE_URL), // BASE_URL 可能是 &#39;/&#39; routes, }); ``` --- #### 总结 Vue3 中的独享路由守卫是一种强大的工具，允许开发者对某些特殊路由实施额外的安全措施或其他定制化行为。合理利用它可以提升用户体验并增强应用程序的安全性。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值