vue-router beforeRouteEnter使用

已于 2022-07-14 11:23:02 修改
阅读量2.3k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 项目实操 文章标签： vue.js javascript 前端
于 2022-07-14 11:22:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44412840/article/details/125780637
本文介绍如何在Vue.js中利用beforeRouteEnter路由守卫实现动态设置meta.title，以适应新增和修改操作在同一个页面时的需求。通过详细阐述路由定义、按钮事件绑定和create.vue页面的实现细节，帮助读者理解这一关键功能。

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

需求:

1:有新增,修改两个按钮,点击按钮使用路由跳转到新增页面(此时新增修改公用一个页面),需要展示不同的 meta.title 名称

实现思路:

1:路由定义

            //创建/修改
            {
   
   
                path: '/online/paper/create/:id?',
                component: () =>
了解本专栏 订阅专栏 解锁全文 超级会员免费看
beforeRouteEnter组件守卫获取上一页面路径（禁止返回按钮返回到新增页面）
m0_63026408的博客
07-07 1159
判断当前页面时从哪个页面跳转过来的（如果是从新增页面跳转过来的话，点击返回按钮时不能返回新增页面，要返回列表页）注：监听路由有时候获取不到 from.path 只能获取到 to.path。
前端Vue篇之Vue-router 导航守卫有哪些、Vue-router 路由钩子在生命周期的体现、Vue-router跳转和location.href有什么区别
星辰迷上大海的博客
03-06 2044
Vue Router 中的导航守卫包括 beforeEach、beforeResolve、afterEach 和路由独享守卫 beforeEnter。这些守卫允许您在路由切换前、解析完成后和路由切换后执行自定义逻辑，比如权限验证、全局加载状态等。
vue 中 beforeRouteEnter 死循环的问题
12-01
如果在 vue 组件的 beforeRouteEnter 钩子函数中调用 API 请求，会出现循环执行的问题： beforeRouteEnter(to, from, next) { login().then(() => { next({ name: 'home' }); }).catch(() => { next(); }); }, 上面的代码会出现无限循环调用的问题，可能是API还没有请求完成，又一次进入 router，调用了 beforRouterEnter 的原因，解决办法加一个变量，在调用API之前判断一下： let request = f
Vue Router 组件内路由钩子详解
最新发布
嗨，欢迎来到我的 CSDN 博客小天地！一名深耕多年的技术发烧友。在这里，我将把日常工作中积累的宝贵经验，从复杂架构设计的精妙之处，到代码优化的实战技巧，毫无保留地分享给大家。
06-01 922
Vue Router 组件内路由钩子详解
vue-router之 beforeRouteEnter
weixin_30741653的博客
11-14 400
beforeRouteEnter在每次路由切换都执行 ,而项目优化后,切换路由mounted只在最开始执行一次 beforeRouteEnter的具体用法可参考官方文档 https://cn.vuejs.org/v2/guide/migration-vue-router.html#activate-替换 需要注意的是： 在这期间路由跳转携带的数据发生改变会影响原数据，他们都指向同...
vue-router中参数传递 && 编程式导航 && 坑 && beforeRouteEnter
weixin_33913377的博客
05-28 391
第一部分: vue-router参数传递 通过router-link我们可以向路由到的组件传递参数，这在我们实际使用中时非常重要的。 　 路由： { path:"/DetailPage", component: DetailPage, name: "详情页" },     router-link: &lt...
vue中beforeRouteEnter、beforeRouteLeave的应用场景
热门推荐
qq_32886245的博客
02-03 2万+
每个vue单文件组件中，可以加入三种route navigation guards（导航守卫钩子）：beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave，比较常用的是beforeRouteEnter和beforeRouteLeave，这里总结下项目中遇到的应用场景。 beforeRouteEnter 比较常见的一种应用场景就是，当前页面是数据列表页并且开启了缓存，跳转到其他子页面再跳转回来时，需要根据不同的页面或参数来判断是否重新加载列表页的数据。有一种方
解决Vue-Router升级导致的Uncaught (in promise)问题
11-19
这个错误的出现是由于Vue-Router从3.1.0版本开始，`push`和`replace`方法开始返回Promise对象，如果导航失败（比如在`beforeRouteEnter`钩子中进行了重定向或者阻止了导航），Promise会被拒绝，而如果没有处理这个...
详解Vue-Router源码分析路由实现原理
10-16
`Vue.use(VueRouter)`方法在内部会调用VueRouter的`install`方法。这个方法负责在Vue实例上进行一系列操作： 1. 在Vue实例的`beforeCreate`生命周期钩子中加入处理逻辑，这使得路由可以在组件创建前就进行初始化。 2...
vue-router重定向不刷新问题的解决
08-27
在使用 Vue Router 进行路由重定向时，可能会遇到重定向不刷新的问题。本文将详细介绍该问题的解决方法。 首先，需要了解 Vue Router 的重定向机制。 Vue Router 提供了重定向的功能，可以将旧的路由重定向到新的...
Vue 学习随笔系列五 -- 路由守卫 beforeRouteEnter 的使用
mm_0123456789的博客
06-29 1万+
beforeRouteEnter 函数内部不能使用 this，这是因为在执行路由钩子函数beforRouteEnter时候，组件还没有被创建出来；next – 下一步，若无指定跳转的路由，设置为空 next() 即可。to – 即将要跳转到的页面。form – 跳转前的页面。
vue-router之beforeRouteEnter实现注册成功判定，并给出相应提示
weixin_44198018的博客
04-09 4021
小白爬坑指南： 下午想用vue框架写个注册登录，结果在注册成功后跳转到登录页面给出提示卡了一下~~ 给大家分享一下我的心路历程免得大家在这浪费时间。 1.beforeRouteEnter的使用： 代码如下 beforeRouteEnter(to, from, next) { console.log(to); console.log(from)...
Vue之beforeRouteEnter的使用
罗毅豪的博客
07-09 1027
beforeRouteEnter用于路由跳转后进入新的页面进行操作，由于<script setup>里面没有内置beforeRouteEnter的语法，所以需要另外写一个<script>标签。 下面代码是beforeRouteEnter的使用示例，从from可以获得跳转页面前的路由信息。 <script> import { defineComponent }...
Vue Router 路由守卫：beforeEach vs beforeRouteEnter
songkai114的博客
03-07 1394
组件内 beforeRouteEnte。全局 beforeEach。
vue-router导航钩子beforeRouteEnter 内获取即将进入的组件实例对象
wallace_yang的博客
12-14 842
vue-router导航钩子beforeRouteEnter 内获取即将进入的组件实例对象
vue钩子函数beforeRouteEnter
三羊的博客
12-02 1万+
vue钩子函数beforeRouteEnter beforeRouteEnter 函数内部的 this 为 undefined，这是因为 beforeRouteEnter 是在页面创建前就执行的， 先执行 beforeRouteEnter，再执行生命周期钩子函数 beforeCreate、created 等。 beforeRouteEnter 有三个参数，to、from、next to：里面是当前...
vue路由守卫 —— 组件内beforeRouteEnter
老君的博客
06-03 3559
beforeRouteEnter 在渲染该组件的对应路由被确认前调用，用法和参数与beforeEach类似，next需要被主动调用 注意： 此时组件实例还未被创建，不能访问this 可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数 beforeRouteEnter(to, from, next) { console.log(this); // 这里打印this是undefined console.log(to, '参数1:即将要进入的目标
vue路由（十二）路由独享守卫beforeEnter和页面内组件路由守卫：beforeRouteEnter，beforeRouteLeave，beforeUpdate
jieweiwujie的博客
09-13 4538
路由独享守卫beforeEnter和页面内组件路由守卫
Vue导航守卫beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave
Future1994的博客
12-14 379
Vue导航守卫beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave （注意不是路由守卫） Vue导航守卫以我自己的理解就是监听页面进入，修改，和离开的功能。每个守卫接受三个参数 to: Route: 即将要进入的目标路由对象 from: Route: 当前导航正要离开的路由 next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。 next(): 进行管道中的下一个钩子。如果全部钩子执行
掌握Vue-router：vue-router-demo深度分析
- 创建 VueRouter 实例，并传入路由配置。 - 在 Vue 实例中，将创建的路由实例挂载到 `router` 选项。 - 在需要路由功能的组件中，使用 `this.$router` 访问路由实例，使用 `this.$route` 访问当前路由的信息。 ###...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Kingsaj

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值