My current setup includes a navigation drawer component that changes the title based on the user's route. For example, when navigating to the home page (e.g. "/"), the title updates to "Home", and when navigating to the profile page (e.g. /profile), the title becomes "Profile". However, if I directly access certain URLs like /profile or /profile/list, the title remains as the default value "TEST" instead of updating to "Profile". Would implementing a watch method on my route be a solution to this issue?
index.js
export const state = () => ({
title: 'TEST',
})
export const getters = {
getTitle: (state) => state.title
}
export const mutations = {
setTitle(state, value) {
state.title = value
}
}
export const actions = {
setTitle({ commit }, value) {
commit('setTitle', value)
}
}
NavigationDrawer.vue
<script>
export default {
data: () => ({
drawer: true,
items: [
{
icon: 'mdi-home',
title: 'Home',
to: '/'
},
{
icon: 'mdi-account',
title: 'Profile',
style: 'profile',
links: [
{ title: 'Dashbord', to: '/profile/' },
{ title: 'Staff List', to: '/profile/list' },
{ title: 'Search', to: '/profile/search' },
]
},
// Additional items here...
],
}),
methods: {
// UpdatePageTitle, toggleDrawer, isAdminChipVisible, isVisibleForRegularUser, isVisibleForHod, and isVisibleForHrAdmin methods imported from original text.
},
mounted() {
const currentPath = this.$router.currentRoute.path
const currentPageName = this.getCurrentPageNameByPath(currentPath)
this.$store.dispatch("setTitle",currentPageName)
this.$nextTick(() => {
if (this.$vuetify.breakpoint.mdAndDown) this.drawer = false
})
},
}
</script>
<template class="nav-color-gradient">
<v-navigation-drawer
class="nav-color-gradient"
v-model="drawer"
:width="300"
app
dark
fixed
floating
>
// Navigation Drawer template code from original text...
</v-navigation-drawer>
</template>