点击注册按钮没有响应时------(有可能是路由守卫问题,如果设置了路由守卫的话)

当我点击注册按钮没有反应,并且排除了很多方面的影响

比如以下几个方面都没有问题

  1. 文件路径错误:请确保文件路径是正确的。检查文件路径是否与实际文件路径匹配,包括文件名的大小写和文件后缀名的正确性。

  2. Vue组件注册问题:请确保注册页面组件已正确导出并在注册页面组件的文件中进行了正确的Vue组件注册。检查注册页面组件文件中是否有export default语句来导出组件

  3. 注册按钮的点击事件是否正确绑定:请确保注册按钮的点击事件绑定正确。在您提供的代码中,注册按钮的点击事件应该是@click="$router.push('/register')"

  4. 注册按钮是否可见:请确保注册按钮在页面中是可见的。检查样式或其他相关代码,确保注册按钮没有被隐藏或覆盖。

然后发现在网址栏直接输入https:/localhost:8081/register时会自动跳转到https:/localhost:8081/login才发现是路由守卫的问题

原本的在我router下面的index.js文件中路由守卫是这样的(用于安全性保护,不登录就不能进到主页面)

// 路由守卫
router.beforeEach((to ,from, next) => {
  if (to.path ==='/login') {
    next();
  }
  const user = localStorage.getItem("user");
  if (!user && to.path !== '/login') {
    return next("/login");
  }
  next();
})

因为没有登录过得到user的信息,并且路径还不是/login就会自动跳转到/login界面

从而导致我们的注册按钮不成功跳转(点击按钮其实是跳转了但被拦截并重新回到登录界面),这个错误我找了两个小时才发现

现在修改如下:

router.beforeEach((to ,from, next) => {
  if (to.path ==='/login' || to.path === '/register') {
    next();//登录注册页面不拦截
  }
  const user = localStorage.getItem("user");//获取user
  if (!user && to.path !== '/login' && to.path !== '/register') {
    return next("/login");//若没获取到user且path不是登录或者注册页面,一定会跳转到登录界面
  }
  next();
})

如果没设置路由守卫,那一般还是上面那些我排除过的问题

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值