I am facing an issue with nested routes in vue-router, specified in the router.js file. After logging in, the Query and Result links in the Header section always display the Register and Login components, even though my Vuex setup seems correct based on my investigation using Vue Developer Tools.
My expected behavior for the vue-router to function correctly is as follows:
- User attempts to login at
/user/login - Login successful, token set in
Vuexstate - User redirected to
/ - User clicks on either the
/queryor/resultlinks,<router-view>should render theQueryorResultcomponent inApp.vue. - User clicks on
Logoutbutton, clearing theVuexstate - User redirected back to
/user/login
However, the actual outcome is different:
- User tries to login at
/user/login - Successful login, token set in
Vuexstate - Redirected to
/ - User clicks on
/querylink, incorrect component (Register) rendered in<router-view>withinApp.vue - User clicks on
/resultlink, another incorrect component (Login) rendered in<router-view>withinApp.vue - User refreshes the page using
F5 - User now able to click on
/queryor/resultlinks, rendering the properQueryorResultcomponent inApp.vue - User clicks on
Logoutbutton, clearing theVuexstate - User redirected back to
/user/login - User clicks on
Loginbutton, resulting in a wrong component (Result) being rendered in<router-view>withinApp.vue
Steps Taken So Far
- Removed token protection on route, but
<router-view>still not displaying the correct components - Removed
v-if="auth"from all token-protected<router-link>instances, which seemed to resolve the issue. However, I need to displayQueryandResultcomponents only when the user is logged in. - Used
v-showinstead ofv-ifto hide links, although unsure if this is the right approach - Named all routes, yet problem persists
Code Snippets
This is my router.js:
import User from './components/user/User'
import Home from './components/Home'
...
// routing setup
This is my Header.vue
<template>
<nav class="navbar navbar-expand-lg ...>
...
// header template code snippet here
...
</nav>
</template>
<script>
// script code snippet here
</script>
This is my App.vue
<template>
<div>
...
// app template code snippet here
...
</div>
</template>
<script>
// script code snippet here
</script>
This is my store/store.js
...
// store setup details here
...
This is my other store-related files such as actions.js, getters.js, mutations.js and custom axios instance in axios.js.
Please advise if more information or code snippets are needed to help resolve the issue. Thank you.