I'm struggling to understand why the router-view in my root template of App.vue is not updating even though the route is changing correctly.
My router code navigates to /:user page and updates the view as expected. However, when I try to navigate from the MainUserView navbar to UserProfile, the route changes to /some_user/profile but the new view is not rendered.
import {createRouter, createWebHistory} from "vue-router"
import MainView from "@/views/MainView.vue";
import UserProfile from "@/views/Profile.vue";
import MainUserView from "@/views/MainUserView.vue";
const routes = [
{
path: "/",
name: "home",
component: MainView
},
{
path: "/:user",
name: "User View",
component: MainUserView,
children: [
{
path: "profile",
name: "User profile view",
component: UserProfile
}
]
},
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;
This is my App.vue
<template>
<div id="wrapper">
<MainView v-if="!user || user !== 'lukasz' && user !== 'karolina'"/>
<navbar v-if="user"></navbar>
<section class="section">
<router-view/>
</section>
</div>
</template>
<script>
import MainView from './views/MainView.vue'
import Navbar from "@/components/Navbar.vue";
export default {
name: 'App',
data(){
return {
}
},
computed: {
user() {
return this.$store.state.user;
}
},
components: {
Navbar,
MainView,
},
beforeCreate() {
this.$store.dispatch("initializeUser");
},
created(){
console.log("DUPA2")
}
}
</script>
And here is the navbar template from which I'm trying to route to UserProfile
<template>
<div class="wrapper">
<nav class="navbar " :class="{'is-danger': user === 'karolina', 'is-info' : user === 'lukasz'}">
<div class="navbar-brand">
<router-link to="/" class="navbar-item" @click="clearUser">
<strong>Choose again</strong>
</router-link>
<a class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbar-menu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu" id="navbar-menu">
<div class="navbar-end">
<router-link to="/send-message" class="navbar-item"
>Send message
</router-link
>
<router-link :to="{name: 'User profile view', params: {user: user}}" class="navbar-item"
>Your Profile
</router-link
>
</div>
</div>
</nav>
</div>
</template>
<script>
export default {
name: "NavbarComponent",
props: {
},
methods: {
clearUser() {
this.$store.commit("clearUser");
}
},
computed:{
user() {
return this.$store.state.user;
}
}
}
</script>
I've tried moving the navbar from App.vue to MainUserView, but it didn't help. Just displaying the router-view inside App.vue also didn't solve the issue. Therefore, I believe the problem lies elsewhere.
Any help would be greatly appreciated!