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

最新推荐文章于 2022-10-27 18:06:11 发布
最新推荐文章于 2022-10-27 18:06:11 发布
阅读量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
    评论
专栏目录
vue中如何通过设置白名单来实现拦截其他的页面_Vue 页面权限控制和登陆验证...
weixin_35507450的博客
02-03 1840
https://github.com/woai3c/Front-end-articles​github.com页面权限控制页面权限控制是什么意思呢？就是一个网站有不同的角色，比如管理员和普通用户，要求不同的角色能访问的页面是不一样的。如果一个页面，有角色越权访问，这时就得做出限制了。Vue 动态添加路由及生成菜单这是我写过的一篇文章， 通过动态添加路由和菜单来做控制，不能访问的页面不添加到路由表里...
vue页面跳转 防止回退
最新发布
努力搬砖的小码
08-30 648
【代码】vue页面跳转 防止回退。
vue防止主页返回到登陆页面
wqnmlgbsz的博客
06-02 1345
验证通过后用this.$router.replace（）跳转 this.$router.replace('homepage');
vue 防止登录后页面回退
qq_46058838的博客
10-27 1102
vue 防止登录后页面回退
vue 禁止显示本网页由、、_【VUE/JS】vue和js禁止浏览器页面后退
weixin_39796152的博客
12-19 220
1、vue 禁止浏览器后退需求是：需要某个路由不能通过浏览器返回，同时不影响相互之间的切换整理一下解决方法 和 使用方法：1.在路由配置中给这个路由添加meta信息，比如:{ path: '/home', component: xxx, meta: {allowBack: false} }2.在全局的router.beforeEach 函数里面获取allowBack的状态，同时更新vuex的all...
vue如何使浏览器url固定_Vue 禁用浏览器的前进后退操作
weixin_39614262的博客
12-19 514
一.禁用前进后退功能在开发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应用开发中是非常基础且重要的部分。下面将...
ssm+vue实现登陆注册
11-26
后端接收到请求后，验证数据，如果成功则返回相应的JSON响应，如包含令牌（token）的信息，前端接收到响应后，可以将令牌存储在本地，以便后续请求的认证。 为了保证安全性，项目可能还会涉及验证码、防止XSS和CSRF...
vue+koa2实现session、token登陆状态验证的示例
12-08
Vue和Koa2结合使用，可以构建出高效、安全的用户认证系统。本示例主要探讨两种常见的登陆验证方法：Session和Token，并给出如何在Koa2中实现这两种验证方式的具体步骤。 1. Session 登录： Session登录依赖于服务器...
vue+SSM实现验证码功能
10-17
总结，实现验证码功能涉及到前后端的协同工作，前端通过img标签和事件处理实现验证码图片的显示和刷新，后端则负责生成验证码字符串和图片，并通过HTTP请求响应机制返回给前端。本篇内容通过实例代码和类的实现细节...
详解vue后台系统登录态管理
12-04
登录成功后，将服务器返回的token保存到Vuex的state和cookie中，同时将用户信息存入localStorage；登出时，清除token、localStorage中的用户信息并清空Vuex状态。 在`getter.js`中，我们定义了一个`userInfo` ...
网站登陆页面
02-08
网站登陆页面是任何在线服务或应用的核心组成部分，它通常是用户首次接触网站的界面，因此设计和功能至关重要。在“#site-landingpage”这个场景中，我们关注的是一个专门用于登录操作的网页。这个页面的设计应该...
Travel:旅游网站登陆页面
03-07
最后，考虑到安全因素，JavaScript 可以在前端进行简单的XSS（Cross-site scripting）防护，例如对用户输入进行转义，防止恶意脚本注入。 在实际项目中，JavaScript 通常与库和框架如jQuery、React或Vue.js结合使用...
heythere:HeyKathryn登陆页面
05-11
7. **响应式设计**：考虑到不同设备和屏幕尺寸，登录页面应采用响应式设计，确保在手机、平板和桌面电脑上都能正常显示和使用。 8. **错误处理**：前端应能优雅地处理各种错误情况，如网络问题、无效输入、服务器...
vue2.x 使用前端的方式 浏览器返回登录页后不让跳过登录进入其他页面
qq_38809672的博客
02-11 1262
如标题所示： 使用单纯前端方式来验证返回登录页后，不能使用浏览器前进的方式绕过登录页。 如果项目未使用vue-router需要先添加插件： npm install vue-router@版本号（本文使用的是3.x版本） vue add router（问是否使用history mode什么的选Y） 添加成功后项目会有个新目录 本文使用了feb-alive插件，不用也没有影响。 区别是如果使用了feb-alive插件这里的代码需要多写一个参数 项目还是用了element ui的组件 如何添加到项目可参考其官
Vue 路由拦截（登陆拦截---没登陆不能访问其他页面，登陆后不能访问登陆页面）
Minyoung 的博客
06-17 7745
vue不断填坑中，首先要在需要拦截的路由添加meta: {requireAuth: true},然后使用路由钩子函数beforeEach拦截处理。 import Router from 'vue-router' const routes = [ { path: '/controlPanel', name: 'ControlPanel', ...
vue项目，禁止登录之后通过浏览器返回到登录页面
weixin_43951592的博客
11-03 1201
解决方案： 登陆成功用 router.replace 代替 router.push
vue中如何通过设置白名单来实现拦截其他的页面_vue中路由拦截无限循环的情况...
weixin_42306688的博客
02-03 1746
如下图，浏览器报出这个错误这是因为路由守卫在拦截路由的时候，找不到跳转的地址，引起了无限循环。在设置路由拦截的时候当指向另一个地址的时候还会触发一次路由拦截，既每次地址栏的变化都会触发一次路由拦截，在没有token值的时候会一直向404跳转，所以会出现无限循环的情况需要在进行跳转的时候有一个满足跳转条件的来阻止跳转带来的路由拦截下面是一段完整的路由拦截代码router.beforeEach ((t...
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、付费专栏及课程。

余额充值