vue3页面组件中怎么获取上一个页面的路由地址
更新时间：2024年02月23日 15:17:30 作者：lucky_zouzou
这篇文章主要给大家介绍了关于vue3页面组件中怎么获取上一个页面的路由地址的相关资料,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
vue2中获取上个页面的路由地址是用vue-router的beforeRouterEnter钩子
beforeRouteEnter(to, from, next) {
next(vm=>{ // 这里的vm就是vue实例，可以用来当做this使用
console.log(to)
console.log(from) //from便是上一个路由的地址
})
}
那vue3中怎么获取呢，在vue-router文档中没有找到相关的钩子，于是就在router中找一找，还真的找到了，mark一下~
import { useRouter } from 'vue-router';
const router = useRouter();
onMounted(()=>{
console.log(router) //在router.options.history.state中back字段就可以看到上一个页面的路由信息（但是只能看到上一个）
})
打印出来是这个样子的：
这个back字段里就是上一个页面的路由。
但是需要注意的是这个页面的路由push到路由栈时才会有这个，也就是说如果上一个页面是通过replace进入这个页面时，back中不会有信息。
附：vue怎样拿到上一个路由的地址，解决点击返回不生效的问题
重复点击触发到当前路由，点击this.$router.go(-1)，则还是会返回点击点的重复路由，解决办法如下：
进入页面的时候记录下进来的路由信息，存为全部变量，点击返回时切换到进来的路由
在vue生命周期里面加（记得在data里面声明pathEnterUrl）
beforeRouteLeave：离开路由之前执行的函数。
next(); 下一步 ，放不放行，必须有这个，相当于一个按钮开启一样。
from 记录来的路由信息，to记录跳转目的路由信息
beforeRouteEnter(to, from, next) {
next(vm => {
vm.pathEnterUrl = from.fullPath
})
} goBack() {
this.$router.push({ path: `${this.pathEnterUrl}` })
},总结
到此这篇关于vue3页面组件中怎么获取上一个页面的路由地址的文章就介绍到这了,更多相关vue3获取上一页面路由地址内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家介绍了Vue实现Excel预览功能使用场景示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
这篇文章主要给大家介绍了基于vue大数据表格卡顿问题的完美解决方案，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
Vue.nextTick是Vue官方给我们提供的一个API（方法），作用是在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM2021-04-04
vue全局引入公共的scss和@mixin与@include的使用方式
这篇文章主要介绍了vue全局引入公共的scss和@mixin与@include的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
这篇文章主要介绍了Vue如何提升首屏加载速度实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-06-06
Vue路由懒加载是一种优化技术,旨在减少应用程序的初始加载时间并提高性能,这篇文章给大家介绍vue路由懒加载的相关知识,感兴趣的朋友跟随小编一起看看吧2024-05-05
第一次写Vue项目，要用到router.js,看了一下官方文档，还是很懵逼，不知道怎么配置，又去看视频查资料，最后终于搞定了。话不多说，先上代码，我再讲一些要注意的细节2022-12-12
vue里面v-bind和Props 利用props绑定动态数据的方法
今天小编就为大家分享一篇vue里面v-bind和Props 利用props绑定动态数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
浅谈vue-cli加载不到dev-server.js的解决办法
本篇文章主要介绍了浅谈vue-cli加载不到dev-server.js的解决办法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
今天小编就为大家分享一篇解决vue attr取不到属性值的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论