I’m working on a Vue.js (v. 2.6) application that uses Vue Router for navigation between different pages. After logging in, the user is redirected to the home page with the following code:
this.$router.push(‘/app’);
The issue is that after navigating to other pages within the app (by clicking buttons that load other routes), the user is unable to use the browser’s back button to return to the previous page or the home page. Route changes but the view doesn’t. It seems like the browser history isn’t being handled correctly. In my browser first I typed https://example.com, and everything works fine but example.com/random_string doesn’t. I’m working with hash mode
What I’ve tried:
-
I’ve confirmed that this.$router.push correctly adds a new entry to the browser’s history.
-
I used this.$router.replace in some cases to avoid adding multiple entries to the history, but the behavior remains the same.
-
I have 0 errors in the console
Problem:
When I navigate between different pages in the app (e.g., /app/dashboard, /app/events), the routing works fine. However, if I try to use the browser’s back button to go back to the previous page, the navigation doesn’t work as expected, and the app doesn’t go back to the home page or the previously visited route.
- My main.js is configured as follows:
const router = new VueRouter({
mode: 'hash',
base: ROUTERPATH,
routes: [{
path: '/',
name: 'Login',
component: Login
},
{
path: '/loginusers',
name: 'LoginUsers',
component: LoginUsers
},
{
path: '/user',
name: 'User',
component: MenuUser,
children: [{
path: '/',
name: 'DashBoardUser',
component: DashBoardUser
},
{
path: ':section(dashboard|events)',
name: 'DashBoardUserSection',
component: DashBoardUser,
props: true
},
]
},
{
path: '/app',
name: 'App',
component: Menu,
children: [{
path: '/',
name: 'Dashboard',
component: Dashboard
},
{
path: 'logout',
name: 'Logout',
component: Logout
},
]
},
]
})
router.beforeEach((to, from, next) => {
if (to.path !== '/' &&
!to.path.startsWith('/loginusers')
) {
var isUser = false;
if (to.path.startsWith('/ute/') || to.path == '/ute') {
isUser = true;
}
if ((localStorage.getItem('token') || '') === '') {
(isUser ? router.push('/loginusers') : router.push('/'))
//router.push('/')
} else {
var token = localStorage.getItem('token')
axios.get(NAMESPACE + 'rest/logged', {
headers: {
'Content-Type': 'application/json',
'Authorization': token
}
})
.then(response => {
// JSON responses are automatically parsed.
try {
if (!response.data.error) {
if (response.data.token != null) {
localStorage.setItem('token', response.data.token)
next()
} else {
(isUser ? router.push('/loginusers') : router.push('/'))
}
} else {
// not logged
(isUser ? router.push('/loginusers') : router.push('/'))
}
} catch (e) {
(isUser ? router.push('/loginusers') : router.push('/'))
}
})
.catch(e => {
(isUser ? router.push('/loginusers') : router.push('/'))
e
})
}
} else {
next()
}
})
–> So, you go to example.com, you login, homepage, it works. You go to https://example.com/random_string, you login, homepage, click on a button, other page, route change, view change, you want to go back with arrows, you cannot (only route change)
I’m looking for a solution that ensures proper browser history handling using hash mode.
Thanks in advance for any help!`
