如何vue中实现点击按钮返回上一页效果【亲测有效】

已于 2022-07-15 10:36:21 修改
阅读量1.6w 收藏 8
点赞数 7
分类专栏： Vue.js实战 高质量硬核实战(全栈版) 文章标签： vue返回上一页操作 按钮跳转上一个路由地址
于 2019-03-15 17:06:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43970743/article/details/88578609
版权
本文介绍在Vue中如何通过点击按钮实现返回上一页的效果。详细步骤包括在页面添加返回按钮并编写back方法，使用this.$router.go(-1)实现功能。同时，作者提醒注意版权问题，并鼓励读者关注其在优快云、掘金等平台的更多Vue实战内容。

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

👨‍🎓作者：bug菌

✏️博客：优快云、掘金等

💌公众号：猿圈奇妙屋

🚫特别声明：原创不易，转载请附上原文出处链接和本文声明，谢谢配合。

🙏版权声明：文章里可能部分文字或者图片来源于互联网或者百度百科，如有侵权请联系bug菌处理。

​​
了解本专栏 订阅专栏 解锁全文 超级会员免费看
【vue页面，公共按钮，点击返回上一页】
weixin_48596030的博客
11-07 2042
当每个页面都需要一个返回按钮时，为了提高效率 ，可以在App.vue页面写一个公共的，这样就可以在每个页面显示了。
vue实现微信浏览器左上角返回按钮拦截功能
11-21
　在微信公众号开发中，有时需要对浏览器左上角返回按钮进行拦截处理相关的页面逻辑，而并不是让页面直接返回上一页，之前在这个细节点上的一直实现得不是很好。但看到京东购物公众号上的效果却实现得非常好，所以...
vue 如何点击按钮返回上一页
weixin_30814319的博客
11-14 3643
1，vue 如何点击按钮返回上一页呢？ 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 第一种只返回上一页 goOff(){ this.$router.go(-1); ...
VUE简介
最新发布
weixin_63618344的博客
04-18 1937
setup是Vue3中一个新的配置项，值是一个函数，它是 Composition API “表演的舞台”，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在setup中。setup() 钩子是在组件中使用组合式 API 的入口。setup函数返回的对象中的内容，可直接在模板中使用。setup中访问this是undefined。setup函数会在beforeCreate之前调用，它是“领先”所有钩子执行的。
Vue 3:实现页面返回上一页的功能
weixin_73060959的博客
09-15 3412
在Vue 3中，可以使用Vue Router库来实现页面返回上一页的功能。首先，确保你已经安装并设置了Vue Router。这两个方法都可以使浏览器的历史记录回退一步。来获取Vue Router实例。然后，我们定义了一个。函数会被触发，从而使浏览器返回到上一个访问的页面。在这个例子中，我们使用。
Vue怎么返回上一级，返回上一页面
热门推荐
姚辉乾
08-16 3万+
 &lt;button @click='prev'&gt;返回上一级&lt;/button&gt;   methods：{   prev(){ this.$router.go(-1) } }     前进就是this.$router.go(1)
vue实现点击按钮返回上一页
weixin_45168482的博客
03-25 1182
<el-button type="text" @click="$router.back()">返回上一步</el-button> 添加@click="$router.back()"方法即可.
用Vue实现点击返回上一个页面
weixin_46419373的博客
05-13 7058
通常在Vue当中，写电商案例，有时候需要返回到上一个页面，在这里我用的方式就是直接回到你写的上个页面 1、通过：this.$router.go(-1) 2、通过：this.$router.back()
vue监听浏览器原生返回按钮,进行路由转跳操作
10-14
每当用户点击返回按钮时，`popstate`事件就会触发，我们需要在事件处理函数中取消默认行为，并根据当前的情况决定是否要跳转路由或回退到上一个页面。 3. 在组件的`destroyed`生命周期钩子中，应该移除`popstate`...
Vue 指令实现按钮级别权限管理功能
10-17
本文介绍的实现方法，通过Vue指令这一强大的特性，让开发人员可以非常便捷地在Vue项目中实现按钮级别的权限控制。 首先，了解Vue指令的定义。Vue指令是Vue框架提供的一组特殊的属性，为Vue实例添加了行为。在这个...
vue点击按钮返回上一页
m0_49714202的博客
04-22 2353
<span @click="$router.go(-1)" style=" width: 100px; height: 50px; line-height: 50px; text-align: center; background-color: yellowgreen; padding: 5px 20px; color: #fff; border-..
Vue中实现回退到上一级目录或者回退到首页
weixin_52890053的博客
04-10 2650
最近在Vue的路由执行一些功能的实现，自己又很菜，所以学习了该方面的知识并在将其分享给大家，期望可以帮到大家，特别适合小白的学习
vue返回上一页的方式
m0_67021283的博客
02-10 4825
从a页面=>b页面=>c页面，当前在c页面，执行某方法后可以如同按了浏览器后退键一样返回b页面。history.go(-1)是返回浏览器的上一页，而由于Vue是单页面应用，有的浏览器对于。1、若项目使用vue-router ，则使用this.$router.go(-1)。变更不认为是两个不同的页面，在hash模式下就不会跳回浏览器上一页。
vue返回上一页
小破船借箭的博客
04-07 140
累一天了 原本想写点深的东西，实在干不动了，水篇文章 方法一 this.$router.go(-1) //返回上一层 方法二 在@click直接写 click="$router.back(-1)" 返回上一页 方法三 history.go(-1) //返回上一层
vue，返回上一页面
aji666的博客
06-07 4896
1、背景 由于Vue所生成的项目叫做单页应用，即SPA，如果还是使用jQuery中的go（-1）或back（）是行不通的，所以，我们使用到了Vue中的编程式导航。 2、基本使用 定义返回按钮： <el-button type="primary" plain @click="returnPage">{{$t('message.test.return')}}</el-button> 在methods中定义方法： /** * [returnPage 返回按
vue 返回上个页面
最初都是小白
12-28 3009
返回上一页： this.$router.go(-1);//返回上一层
vue-router跳转页面，返回上一页跳回指定位置
Keix
06-11 6601
常用的：keep-alive路由缓存（不多解说） 但上面很多时候，因页面需求原因，不能使用这种实现方式，在网上找了很多方法，但是都不是很好用，现在自己实现了一个还算不错的。 首先，在vue-router中，scrollBehavior这个方法是可以打印访问过的页面，滚动的位置的。【注意：在刷新页面时，不会触发该事件】 我们可以使用vuex储存滚动的位置（因页面会做接口请求数据，所以要在数据渲染完成后，再进行跳转） store.commit('SET_ROUTER_POSITION', s.
vue 返回前一个页面操作
在这个数字革命的时代，我们将引领您穿越去中心化、智能合约、加密货币以及分布式应用程序的世界。无论您是初学者还是经验丰富的区块链开发者，我们都致力于为您提供有价值的信息和见解。
03-02 4108
需求描述 点击返回按钮返回到前一个页面 当没有前一个页面时，默认跳到首页 1. 方法一 此方法根据浏览器默认的历史记录操作 window.history 。 但是此方法存在一个问题：当前一个页面并非本网站（为第三方）页面则会跳到第三方页面 如：从 baidu.com --> https://bscproject.org/#/project/1 点击返回时会跳到 baidu.com 并不会跳到 https://bscproject.org/ 具体实现方法： <a href="javas
vue3如何实现重新登陆后还能返回上一次所在的页面
m0_56520553的博客
10-23 695
在做项目时，想到一个功能，希望在用户token失效或者token被修改时，重新回到登录页，但是登陆成功后，能重新返回刚刚退出时候页面。
vue 使用按钮实现 返回上一页的代码
03-28
在 Vue 中，可以使用 `router` 对象来实现返回上一页的功能。具体代码如下： 1. 在需要使用返回上一页的组件中，引入 `VueRouter`： ```javascript import VueRouter from 'vue-router' ``` 2. 在 `methods` 中定义一个返回上一页的函数： ```javascript methods: { goBack() { this.$router.go(-1) } } ``` 3. 在模板中使用 `v-on` 绑定点击事件，并调用 `goBack` 函数： ```html <template> <div> <button v-on:click="goBack">返回上一页</button> </div> </template> ``` 这样就可以在 Vue 中使用按钮实现返回上一页的功能。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

bug菌¹

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

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

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

打赏作者

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

抵扣说明：

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

余额充值