vue移动端项目中返回上一路由页面、根据当前路由信息控制返回键的显示与隐藏

最新推荐文章于 2025-03-21 16:06:29 发布

黑孩er

最新推荐文章于 2025-03-21 16:06:29 发布

阅读量3.4w

点赞数 3

分类专栏： vue 文章标签：移动监听路由变化

本文链接：https://blog.csdn.net/u012219674/article/details/78653825

版权

在Vue移动端项目中，实现点击返回上一页面的功能通常使用`this.$router.go(-1)`。同时，根据当前路由信息动态控制返回键的显示与隐藏，例如在主页下隐藏返回键，其他页面显示。可以利用`v-show`结合路由判断来完成这一需求。

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

最近在做一个小型的vue移动端项目（自己练手），遇到的两个问题记录一下：

问题1：如何使用点击方式控制当前页面返回到上一个路由页面：

在网上查阅了相关的资料，返回上一目录用到的是 this.$router.go(-1); 将该方法些到返回按钮上，点击触发该方法；具体代码如下:

1.在当前页面添加返回按钮

<!--返回按钮-->
<div class="backTo" v-show=

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

黑孩er

关注关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue页面不同路由，显示不同的title

weixin_45979310的博客

09-30

407

在路由组件中，添加 meta 配置属性 { path: '/Classify', name: 'Classify', component: () => import('@/views/classify.vue' /* 分类 */ ), meta: { title: "设施分类" } }, 然后在 main.js中，设置路由导航守卫 router.beforeEach((to, from, next) =&gt

【HCIP第九天（重发布、路由策略、抓取流量）】

HealerCCX的博客

07-17

263

默认RIP和OSPF协议若进行双点重发布，由于两者的优先级不同，故第一台ASBR设备重发布动作结束后，将影响其他ASBR设备的路由表。使得路由可能被回传到源协议当中，发生路由回馈----A协议的路由重发布到B协议当中后，又被重新发布回A协议。路由回馈可能会导致选路不佳甚至路由环路的出现。...

3 条评论您还未登录，请先登录后发表或查看评论

vue-router基本使用

最新发布

ShawLee0925的博客

03-21

534

vue-router的基本使用，主要包括query传参以及params传参

vue 多个class属性_用 Vue 绑定单个或多个 Class 名

weixin_39622419的博客

12-20

951

用 Vue 绑定单个或多个 Class 名一、用变量形式绑定单个 Class 名在vue中绑定单个class名还好说，直接写就可以了export default {name: 'app',data () {return {// 2.在 data 中把 yellow 赋给 boxbox: 'yellow'}}}/* 1.在样式表中写好样式 */.yellow{width: 200px;h...

vue修改路由切换时的class名称，并添加切换动画

u012758488的博客

06-11

1073

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do.

vue项目中禁止移动设备的物理返回键

tiantian082054的博客

05-30

2151

项目需求需要在某一页面禁掉移动设备的物理返回键，查阅了很多资料，给出的大同小异，基本上都是同一种方法 1、挂载完成后，判断浏览器是否支持popstate mounted(){ // 如果支持 popstate 一般移动端都支持了 if (window.history && window.history.pushState) { // 往历史记录里面添加一条新的...

vue中解决微信html5原生ios虚拟键返回不刷新问题

01-18

做微信h5页面时，经过了微信授权才跳转到一级默认路由home.vue中，因此在home页面时在IOS中底部会出现虚拟的返回键，安卓上不会出现。且在IOS点击返回时会跳转到home空白页面不重新加载，但是在安卓机上点击返回键会...

解决Vue2移动端（H5）项目，手机打开项目侧滑或者按物理返回键，始终是走this.$router.go(-1)

wocwin的博客

08-16

898

解决Vue2移动端（H5）项目，手机打开项目侧滑或者按物理返回键，始终是走this.$router.go(-1)

vue移动端应用打包成App后，监听手机物理返回键

qq_39154056的博客

11-17

1439

当vue移动端项目运行在浏览器或者手机上时，点击页面上自定义的后退按钮正常返回上一页，但点击手机上的物理返回键时，app就直接退出关闭了。那么，要如何控制点击手机返回键时能后退页而不是直接退出应用呢？下面就是解决的方法：使用能监听手机物理返回键的框架 MUI 1、安装依赖 npm install vue-awesome-mui -save 2、在 main.js 中引入 import Mui from 'vue-awesome-mui' Vue.use(Mui) 3、在 App.vue 中使用

h5移动端实现物理返回键关闭弹框而非返回上一级页面

qq_40026668的博客

04-08

2862

需求：页面中的popup弹框，可以通过物理返回键进行关闭方案：（1）当打开弹框时，向history中添加一个空记录，并且监听history的popstate变化（2）当弹框打开状态用户操作了返回上一级页面，会触发监听事件，关闭弹框（3）当弹框打开状态用户通过状态值（比如popup中有个取消按钮）关闭了弹框，要把监听事件清除实现 // vue3 setup模式 import { useEventListener } from '@vueuse/core' //页面中点击打开弹框按钮..

vue路由替换类名

Nikki_u的博客

03-27

232

在main.js下路由实例里与routes并列写入 // router-link-active=>active linkActiveClass: 'active', // router-link-exact-active=>exact linkExactActiveClass: 'exact'

VUE IOS移动端返回上一页

weixin_43792363的博客

12-04

1279

IOS移动端从B页面选择完数据使用this.$router.back()或this.router.go(-1)返回到A页面时，没有重新调用mounted()函数，并且不会带回B页面所选的数据。可能是因为使用keep-alive，会缓存页面，导致返回上一个页面时不会触发mounted()函数，这时候可以使用actived()函数使用事件总线this.bus，可以实现在任意组件间通信。B页面某个方法中发送事件this.bus，可以实现在任意组件间通信。B页面某个方法中发送事件this.bus，可以实现在任意组件

vue之根据不同的值绑定不同的class样式类名

一键写代码的博客

05-18

4710

需求描述有时候，我们需要根据不同的数据，来展示不同的效果。解决方式方法一：使用绑定函数返回值实现定义好需要的样式： .online { color: #07c160; font-weight: bold; } .offline { color: #ff976a; font-weight: bold; } <div v-for="(item, index) in list" :key="index" class="item-wrap" >

vue3相同组件在不同路由页面中显示不同的样式

shs_s的博客

07-18

558

一行代码即可搞定，gift页面改用specialClass类名写样式，其余页面使用center类目样式。

vue中router的封装+返回键导航模板设置

weixin_43998944的博客

02-23

777

h5 开发项目中，由于每个页面都有导航组件，即使每个页面都去引用导航组件也会造成代码量大，不好维护，代码冗余等问题，所以就想到直接封装到路由里面，在路由里面直接设置是否显示导航、改变导航颜色，改变返回键主题色、及按需修改导航文本说一下思路建立导航返回组件在路由routerList 中就直接设置是否显示导航组件、修改主题色、修改文字、是否显示返回键的需求通过中间路由根据变量直接引入页面，在路由中间键中的beforeEachHandle 方法中根据store 去加载导航显示状态及控制是否显

移动端返回上一页

anmi7832的博客

07-24

341

返回上一页，在PC端我们可以使用：history.go(-1)或者history.back()，可以正常返回第一层。这样，我们不需要上一页的 url 具体是什么，只要使用 history 一般都没啥问题。但是在移动端，如果想要返回上一页。比如从A页面跳到B页面，如果B页面想返回A页面，为了防止不会跳错，必须要有一个 < 按钮，给它加history.go(-1) ，返回...

【vue页面，公共按钮，点击返回上一页】

weixin_48596030的博客

11-07

2032

当每个页面都需要一个返回按钮时，为了提高效率，可以在App.vue页面写一个公共的，这样就可以在每个页面显示了。

vue移动端更改手机物理按键返回问题

diandipi8532的博客

03-23

1254

又是一天见面的日子，春季盎然~ 已经无法在继续抒情下去了，写作水平骤降！！今天记录下应用cordva+vue生成的apk 在手机物理返回时遇到的问题；前提说~~应用vue，我们可以自定义上一路径和下一路径，其实就是在开发webapp时，我们通常会在webapp的头部导航栏自定义返回的上层路径，但是，手机的物理路径并不是像上层路由那样直接返回了，手机物理返回，按照html5 的hi...

Vue H5安卓的返回键解决方案

12-01

1178

使用Vue和H5做安卓手机端时候，安卓的实体返回键会返回上一个路由页面，导致页面出现各种问题。在网上苦苦寻找了各种方法，都不能完美解决，最终我想到下面这种方法，基本解决需求。一、路由跳转页面改写在组件中，有需要跳转页面，并且不让用户返回的情况，例如：支付、登录、注销等。请做一下修改： 1、this.$router.push()全部改写为this.$router....

vue 移动端使用物理键返回，当前页面会在销毁前触发滚动

05-31

这可能是因为移动端的物理键返回触发了浏览器的后退事件，导致页面重新加载并回到前一个页面。当页面重新加载时，滚动位置也会被重置并导致滚动到页面顶部。解决方法可以是在页面销毁前记录当前滚动位置，在重新加载...