vue3页面组件中怎么获取上一个页面的路由地址

王芃博

vue2中获取上个页面的路由地址是用vue-router的beforeRouterEnter钩子

1. beforeRouteEnter(to, from, next) {
   
2.    next(vm=>{          //  这里的vm就是vue实例，可以用来当做this使用
   
3.       console.log(to)
   
4.       console.log(from) //from便是上一个路由的地址
   
5.     })
   
6.   }

复制代码

那vue3中怎么获取呢，在vue-router文档中没有找到相关的钩子，于是就在router中找一找，还真的找到了，mark一下~

1. import { useRouter } from 'vue-router';
   
2. const router = useRouter();
   
3. 
   
4. onMounted(()=>{
   
5.         console.log(router) //在router.options.history.state中back字段就可以看到上一个页面的路由信息（但是只能看到上一个）
   
6. })

复制代码

打印出来是这个样子的：

这个back字段里就是上一个页面的路由。
但是需要注意的是这个页面的路由push到路由栈时才会有这个，也就是说如果上一个页面是通过replace进入这个页面时，back中不会有信息。
附：vue怎样拿到上一个路由的地址，解决点击返回不生效的问题
重复点击触发到当前路由，点击this.$router.go(-1)，则还是会返回点击点的重复路由，解决办法如下：
进入页面的时候记录下进来的路由信息，存为全部变量，点击返回时切换到进来的路由
在vue生命周期里面加（记得在data里面声明pathEnterUrl）
beforeRouteLeave：离开路由之前执行的函数。
next();  下一步 ，放不放行，必须有这个，相当于一个按钮开启一样。
from 记录来的路由信息，to记录跳转目的路由信息

1. beforeRouteEnter(to, from, next) {
   
2.         next(vm => {
   
3.             vm.pathEnterUrl = from.fullPath
   
4.         })
   
5.     }

复制代码

1. goBack() {
   
2.             this.$router.push({ path: `${this.pathEnterUrl}` })
   
3.         },

复制代码

总结
到此这篇关于vue3页面组件中怎么获取上一个页面的路由地址的文章就介绍到这了,更多相关vue3获取上一页面路由地址内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/316230erz.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！