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

在Vue2中,可以使用beforeRouteEnter钩子获取上一个页面的路由地址。而在Vue3中,可以利用useRouter和onMounted生命周期钩子,在router.options.history.state.back字段获取上一个页面的路由信息,但要注意的是,如果上一个页面是通过replace方法进入的,这个字段将不会包含信息。

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

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中不会有信息。

最后,如果大家有其他好的办法,欢迎补充交流 !!!

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值