当我点击注册按钮没有反应,并且排除了很多方面的影响
比如以下几个方面都没有问题
-
文件路径错误:请确保文件路径是正确的。检查文件路径是否与实际文件路径匹配,包括文件名的大小写和文件后缀名的正确性。
-
Vue组件注册问题:请确保注册页面组件已正确导出并在注册页面组件的文件中进行了正确的Vue组件注册。检查注册页面组件文件中是否有
export default
语句来导出组件 -
注册按钮的点击事件是否正确绑定:请确保注册按钮的点击事件绑定正确。在您提供的代码中,注册按钮的点击事件应该是
@click="$router.push('/register')"
-
注册按钮是否可见:请确保注册按钮在页面中是可见的。检查样式或其他相关代码,确保注册按钮没有被隐藏或覆盖。
然后发现在网址栏直接输入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();
})
如果没设置路由守卫,那一般还是上面那些我排除过的问题