解决vue登录后点击返回以后回到了登录页

1、挂载完成后,判断浏览器是否支持popstate

mounted(){
  if (window.history && window.history.pushState) {
    history.pushState(null, null, document.URL);
    window.addEventListener('popstate', this.goBack, false);
  }
},

2、页面销毁时,取消监听。否则其他vue路由页面也会被监听

destroyed(){
  window.removeEventListener('popstate', this.goBack, false);
},

3、将监听操作写在methods里面,removeEventListener取消监听内容必须跟开启监听保持一致,所以函数拿到methods里面写

methods:{
  goBack(){
    this.$router.replace({path: '/'});
    //replace替换原路由,作用是避免回退死循环
  }
}
当在Vue登录点击登录按钮时,会跳转至首。具体的实现步骤如下: 1. 首先,需要在Vue登录面组件中,创建一个表单用于接收用户输入的登录信息,包括用户名和密码。 2. 在Vue组件的data属性中,定义用户名和密码的变量,并初始化为空字符串。 3. 在登录按钮上添加一个点击事件的监听器,并指定一个处理函数。 4. 在处理函数中,可以通过Vue框架提供的方法,获取用户在输入框中输入的用户名和密码。 5. 对用户输入的用户名和密码进行一些必要的验证,例如判空、长度等。如果验证不通过,可以在面上显示错误信息。 6. 如果验证通过,可以将用户名和密码发送给后台服务器进行登录验证。可以通过Vue的Axios库等工具,发送一个POST请求,将输入的用户名和密码作为请求参数发送到服务器的登录接口。 7. 在服务器端进行登录验证,如果用户名和密码正确,返回一个登录成功的状态码(例如200),否则返回一个登录失败的状态码(例如401)。 8. 在Vue登录面组件中,根据服务器返回的状态码进行判断。如果登录成功,可以使用Vue的router库跳转至首组件。 9. 在Vue的路由配置中,保证首组件与登录面组件的路径匹配。可以使用Vue的router-link标签进行跳转。 10. 当成功跳转至首组件时,用户就可以访问到该面的内容,实现从登录跳转至首的功能。 总结起来,通过在Vue登录面组件中监听登录按钮的点击事件,获取用户的登录信息并发送至服务器进行验证,并根据验证结果跳转至首组件,就可以实现从登录点击登录按钮进入首的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值