Vue防止从主页返回到登录页

最新推荐文章于 2024-08-26 16:38:21 发布
最新推荐文章于 2024-08-26 16:38:21 发布
阅读量2k 收藏 3
点赞数 5
分类专栏： vue 文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43642318/article/details/116146928
版权

Vue防止从主页返回到登录页

问题

使用以下代码实现登录成功后跳转到首页，此时使用浏览器的返回键可以跳转回到登录页面

this.$router.push('/main')

解决办法

采用以下代码

this.$router.replace('/main')

二者区别

  • 官方参考网址
  • 调用 this.$router.push访问路由实例，会先history栈添加一个新记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL
  • 跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
  • Vue Router 的导航方法 (push、 replace、 go) 在各类路由模式 (history、 hash 和 abstract) 下表现一致
Soladadidadi1925
关注
  • 5
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3 - 详解 H5 微信公众号网页微信授权登录后重复跳转登录页，点同意后频繁授权登录无法返回上一页，微信h5登录后如何跳转到原来的页面，公众号网页授权，已授权用户会再次弹出授权框页（完美解决教程
王佳斌
07-07 2136
vue3，nuxt3，微信授权登录，公众号网页，vue3公众号登录，h5，网页，网站，移动端H5，微信登陆，重复跳转问题，一直来回来总是授权登录，vue微信公众号如何授权登录后返回到原来的页面，跳不出去，点击同意后授权登录还会再跳转回来，用户同意授权后还是会回到登录页，苹果IOS手机无限，死循环一直重复跳转，路由，vue3微信授权登录详细教程，出不去怎么办，授权页面频繁重复，用户都已经同意已授权登录了还会再弹出授权框，微信公众平台网页授权两次或多次重定响应问题，多次重定向跳转，导致code使用多次问题，H5
Vue-系统登录进入首页后禁用浏览器返回键
qq_41154522的博客
08-04 484
需要注意的是调用 history.pushState() 或 history.replaceState() 不会触发 popstate 事件。只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在 Javascript 代码中调用 history.back() 或者 history.forward() 方法）。如果未指定此参数，则将其设置为文档的当前 URL。title: 当前大多数浏览器都忽略此参数，尽管将来可能会使用它。state: 状态对象可以是任何可以序列化的对象。
vue页面跳转 防止回退
努力搬砖的小码
08-30 675
【代码】vue页面跳转 防止回退。
vue中如何通过设置白名单来实现拦截其他的页面_Vue 页面权限控制和登陆验证...
weixin_35507450的博客
02-03 1866
https://github.com/woai3c/Front-end-articles​github.com页面权限控制页面权限控制是什么意思呢？就是一个网站有不同的角色，比如管理员和普通用户，要求不同的角色能访问的页面是不一样的。如果一个页面，有角色越权访问，这时就得做出限制了。Vue 动态添加路由及生成菜单这是我写过的一篇文章， 通过动态添加路由和菜单来做控制，不能访问的页面不添加到路由表里...
vue防止主页返回到登陆页面
wqnmlgbsz的博客
06-02 1348
验证通过后用this.$router.replace（）跳转 this.$router.replace('homepage');
vue 防止登录后页面回退
qq_46058838的博客
10-27 1122
vue 防止登录后页面回退
vue 禁止显示本网页由、、_【VUE/JS】vue和js禁止浏览器页面后退
weixin_39796152的博客
12-19 236
1、vue 禁止浏览器后退需求是：需要某个路由不能通过浏览器返回，同时不影响相互之间的切换整理一下解决方法 和 使用方法：1.在路由配置中给这个路由添加meta信息，比如:{ path: '/home', component: xxx, meta: {allowBack: false} }2.在全局的router.beforeEach 函数里面获取allowBack的状态，同时更新vuex的all...
vue如何使浏览器url固定_Vue 禁用浏览器的前进后退操作
weixin_39614262的博客
12-19 529
一.禁用前进后退功能在开发vue应用中，如何禁用浏览器的前进后退功能呢？网上搜到的答案基本如下：history.pushState(null, null, document.URL)window.addEventListener("popstate", function() {history.pushState(null, null, document.URL)})但应该放在哪儿？经过尝试，我是如...
vue实现登录页面的验证码以及验证过程解析(面向新手)
10-16
在Vue.js中实现登录页面的验证码功能涉及到前端交互与安全验证的重要环节，这对于任何Web应用来说都是必不可少的。本文将详细解析如何在Vue环境中构建一个验证码组件，包括生成验证码图片和进行验证的过程。 首先，...
vue+spring boot网盘练习项目前端代码之登陆注册页面
03-09
在本项目中，我们主要探讨的是使用Vue.js作为前端框架，与Spring Boot后端服务进行集成，构建一个网盘练习项目。这个项目包含了登录和注册功能的前端代码实现，这在现代Web应用开发中是非常基础且重要的部分。下面将...
vue+koa2实现session、token登陆状态验证的示例
12-08
Vue和Koa2结合使用，可以构建出高效、安全的用户认证系统。本示例主要探讨两种常见的登陆验证方法：Session和Token，并给出如何在Koa2中实现这两种验证方式的具体步骤。 1. Session 登录： Session登录依赖于服务器...
vue+SSM实现验证码功能
10-17
总结，实现验证码功能涉及到前后端的协同工作，前端通过img标签和事件处理实现验证码图片的显示和刷新，后端则负责生成验证码字符串和图片，并通过HTTP请求响应机制返回给前端。本篇内容通过实例代码和类的实现细节...
vue2.x 使用前端的方式 浏览器返回登录页后不让跳过登录进入其他页面
qq_38809672的博客
02-11 1265
如标题所示： 使用单纯前端方式来验证返回登录页后，不能使用浏览器前进的方式绕过登录页。 如果项目未使用vue-router需要先添加插件： npm install vue-router@版本号（本文使用的是3.x版本） vue add router（问是否使用history mode什么的选Y） 添加成功后项目会有个新目录 本文使用了feb-alive插件，不用也没有影响。 区别是如果使用了feb-alive插件这里的代码需要多写一个参数 项目还是用了element ui的组件 如何添加到项目可参考其官
Vue 路由拦截（登陆拦截---没登陆不能访问其他页面，登陆后不能访问登陆页面）
Minyoung 的博客
06-17 7785
vue不断填坑中，首先要在需要拦截的路由添加meta: {requireAuth: true},然后使用路由钩子函数beforeEach拦截处理。 import Router from 'vue-router' const routes = [ { path: '/controlPanel', name: 'ControlPanel', ...
vue项目，禁止登录之后通过浏览器返回到登录页面
weixin_43951592的博客
11-03 1218
解决方案： 登陆成功用 router.replace 代替 router.push
vue中如何通过设置白名单来实现拦截其他的页面_vue中路由拦截无限循环的情况...
weixin_42306688的博客
02-03 1774
如下图，浏览器报出这个错误这是因为路由守卫在拦截路由的时候，找不到跳转的地址，引起了无限循环。在设置路由拦截的时候当指向另一个地址的时候还会触发一次路由拦截，既每次地址栏的变化都会触发一次路由拦截，在没有token值的时候会一直向404跳转，所以会出现无限循环的情况需要在进行跳转的时候有一个满足跳转条件的来阻止跳转带来的路由拦截下面是一段完整的路由拦截代码router.beforeEach ((t...
【VUE/JS】vue和js禁止浏览器页面后退
小猪的博客
12-03 2169
1、vue 禁止浏览器后退 需求是：需要某个路由不能通过浏览器返回，同时不影响相互之间的切换 整理一下解决方法 和 使用方法： 1.在路由配置中给这个路由添加meta信息，比如: { path: '/home', component: xxx, meta: {allowBack: false} } 2.在全局的router.beforeEach 函数里面获取allowBack的状态，同时更新...
vue 阻止页面回退
weixin_48768170的博客
11-16 593
1.安装依赖 npm install vue-prevent-browser-back --save 2.在需要阻止的组件单独引入，然后注入… <template> <div> </div> </template> <script> import Home from "@/components/common/Home.vue"; import preventBack from 'vue-prevent-browse
JavaScript代码片段
最新发布
weixin_66128399的博客
08-26 1909
使用场景是：后端列表查询接口，某个字段前端不传，后端就不根据那个字段筛选，例如name不传的话，就只根据page和pageSize筛选，但是前端查询参数的时候（vue或者react）中，往往会这样定义。给后端发送数据的时候，要判断某个属性是不是空字符串，然后给后端拼参数，这块逻辑抽离出来就是cleanObject，代码实现如下。leading-true，trailing-true：在延时开始时就调用，延时结束后也会调用。//第一个参数指定位数，第二个字符串指定字符，都是可选参数，如果都不传，默认生成8位。
vue点击浏览器返回到指定页面
05-24
你可以使用 `vue-router` 中的 `router.go()` 方法来实现点击浏览器返回到指定页面。 例如，假设你希望在用户点击浏览器返回按钮时返回到 `home` 页面，你可以在 `created` 生命周期钩子函数中监听 `window` 对象的 `popstate` 事件，并调用 `router.go(-1)` 方法： ```vue <template> <div> <h1>My Page</h1> </div> </template> <script> export default { created() { window.addEventListener('popstate', this.goBack) }, beforeDestroy() { window.removeEventListener('popstate', this.goBack) }, methods: { goBack() { this.$router.go(-1) } } } </script> ``` 在上面的例子中，我们在 `created` 生命周期中添加了一个 `popstate` 事件监听器，并在组件销毁前移除了该监听器。当用户点击浏览器返回按钮时，`goBack` 方法会被调用，它会调用 `router.go(-1)` 方法返回到上一页。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值