My goal is to redirect the user back to the homepage when they click the browser's back arrow to return to the previous page.
However, I'm facing an issue where I cannot go back to the previous page when I'm on the login page using the browser's arrow buttons.
Someone suggested using "router BeforeEach" but I'm struggling to understand how to implement it.
main.js:
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/login',
name: 'Login',
component: Login,
meta: { requiresAuth: true }
},
{
path: '/register',
name: 'Register',
component: Register,
},
{
path: '/complete_registration',
name: 'Complete Registration',
component: CompleteRegistration,
},
{
path: '/profile',
name: 'Profile',
component: Profile,
meta: { requiresAuth: true }
}
]
const router = new VueRouter({routes, mode: 'history'})
router.beforeEach((to, from, next) => {
if ( from.matched.some(record => record.meta.requiresAuth) ) {
alert('enter')
next('/');
} else {
next();
}
});
Upon logging in, I keep getting stuck in a loop of pop-up alerts.