vue router-link 声明式返回上一页

本文探讨了在Vue.js中使用声明式方法实现页面返回的功能。通过分析Vue Router官方文档,发现直接使用router.go(n)在<router-link>中不可行。最终采用在<el-button>中绑定@click事件并调用$router.back(-1)的方式成功实现。此方法避免了额外方法的编写,简化了代码。

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

因为只有一个点击的操作,没有任何其他的逻辑操作,我就不想写一个方法来承载它,就一直在找声明式的写法

官网文档链接:https://router.vuejs.org/zh/guide/essentials/navigation.html

在文档中介绍了一种router.go(n)来返回上一页,但是没有示例,经过测试无法使用这种写法

<router-link :to="router.go(1)">
	<el-button>返回</el-button>
</router-link>

搜索一些博客,都是使用的编程式的方法来返回上一页。
所以就经过简化后,将方法绑定在@click中

<router-link to>
	<el-button @click="$router.back(-1)">返回</el-button>
</router-link>

注意:router-link中的to要留空,否则@click方法不起作用

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值