目前，我有一个导航抽屉组件。所以这个想法是这样的，当用户导航到任何导航，比如主页或个人资料页面，标题会根据路径相应地改变。例如，如果用户导航到主页(e.g. "/")，则标题将更改为"首页";如果用户导航到个人资料页面(e.g. /profile)，标题将更改为"个人资料"。然而，如果我直接访问任何urle.g /profile , /profile/list，标题不会更改为"Profile"相反，标题将使用默认值"TEST"。我应该在我的路由上实现watch方法来解决这个问题吗?
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' },
]
},
{
icon: 'mdi-umbrella-beach',
title: 'E-Leave',
style: 'leave',
to: '/leave',
},
{
icon: 'mdi-calendar-clock',
title: 'Time Attendance',
style: 'attendance',
to: '/attendance'
},
{
icon: 'mdi-car-lifted-pickup',
title: 'Reservation',
style: 'reservation',
to: '/reservation'
},
{
icon: 'mdi-weight-lifter',
title: 'Staff Training',
style: 'training',
links: [
{ title: 'Training Records', to: '/training/records' },
{ title: 'Training Programs', to: '/training/programs' },
]
},
{
icon: 'mdi-medical-bag',
title: 'Medical',
style: 'medical',
links: [
{ title: 'My Balances', to: '/medical/balance/self' },
]
},
],
}),
methods: {
getCurrentPageNameByPath(){
var array = [
{ name:"Profile", value:"/profile/"},
];
const search = what => array.find(element => element.name === what);
const found = search("Profile");
if (found) {
console.log(found.value, found.other);
} else {
console.log('No result found');
}
},
updatePageTitle(title) {
this.$store.dispatch('setTitle', title)
},
toggleDrawer() {
this.drawer = !this.drawer;
},
isAdminChipVisible(link) {
return (link.hasOwnProperty('is_hr') && link.is_hr) || (link.hasOwnProperty('is_hod') && link.is_hod);
},
isVisibleForRegularUser(link, item) {
return item.public || ( this.$auth.user && (!link.hasOwnProperty('is_hod') || link.is_hod == false) && (!link.hasOwnProperty('is_hr') || link.is_hr == false) );
},
isVisibleForHod(link, item) {
return item.public || ( this.$auth.user && (link.hasOwnProperty('is_hod') && link.is_hod) && this.$auth.user.is_hod );
},
isVisibleForHrAdmin(link, item) {
return item.public || ( this.$auth.user && (link.hasOwnProperty('is_hr') && link.is_hr) && this.$auth.user.is_hr_admin );
}
},
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
>
<template v-slot:prepend>
<div class="navigation-drawer__spacer">
<div class="text-center my-5">
<img src="/snet_white.png" height="50" />
</div>
</div>
</template>
<template v-slot:append>
<div class="navigation-drawer__spacer"></div>
</template>
<template v-slot:default>
<v-list class="py-0">
<template
v-for="(item, index) in items"
>
<v-list-group
v-if="item.links"
:append-icon="null"
:group="item.to"
:ripple="false"
v-bind:key="index"
router
>
<template v-slot:activator>
<v-list-item-content>
<v-list-item-title
class="text-right"
v-text="item.title.toUpperCase()"
>
</v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-action>
</template>
<template v-for="(link, l) in item.links">
<!-- for hod -->
<v-list-item
v-if="isVisibleForHod(link, item)"
:key="l"
:class="item.style"
:ripple="false"
:to="link.to"
exact
router
@click="updatePageTitle([item.title, link.title])"
>
<v-list-item-title class="text-right">
<v-chip v-if="isAdminChipVisible(link)" color="white float-left" x-small>ADMIN</v-chip>
{{link.title.toUpperCase()}}
</v-list-item-title>
</v-list-item>
<!-- for hr admin -->
<v-list-item
v-else-if="isVisibleForHrAdmin(link, item)"
:key="l"
:class="item.style"
:ripple="false"
:to="link.to"
exact
router
@click="updatePageTitle([item.title, link.title])"
>
<v-list-item-title class="text-right">
<v-chip v-if="isAdminChipVisible(link)" color="white float-left" x-small>ADMIN</v-chip>
{{link.title.toUpperCase()}}
</v-list-item-title>
</v-list-item>
<!-- for regular staff -->
<v-list-item v-else-if="isVisibleForRegularUser(link, item)"
:key="l"
:class="item.style"
:ripple="false"
:to="link.to"
exact
router
@click="updatePageTitle([item.title, link.title])"
>
<v-list-item-title class="text-right">
{{link.title.toUpperCase()}}
</v-list-item-title>
</v-list-item>
</template>
</v-list-group>
<v-list-item
exact-active-class="primary--text"
:ripple="false"
:to="item.to"
v-bind:key="index"
exact
router
v-else
@click="updatePageTitle(item.title)"
>
<v-list-item-content>
<v-list-item-title
class="text-right"
v-text="item.title.toUpperCase()"
>
</v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-action>
</v-list-item>
</template>
</v-list>
</template>
</v-navigation-drawer>
</template>
我建议你用两种方法:
1 -你可以调度'setTitle'动作在每个页面的挂载。例如在Profile上。您应该添加以下代码:
mounted(){
// Current page Name is the page Name, in this case it's Profile
this.$store.dispatch("setTitle",currentPageName)
}
2 -你可以在'NavigationDrawer '的'created'或'mounted'方法中从当前路由url中提取页面名称。vue'文件，然后通过传递页面名称来调度新的操作'setTitle':
mounted(){
// your code
......
// 1 - Get current path from router
const currentPath = this.$router.currentRoute.path
// 2 - Search for page Name in items array , you can create a method
// (getCurrentPageNameByPath) for doing this task
const currentPageName = getCurrentPageNameByPath(currentPath)
// 3 - dispatch cureent page name
this.$store.dispatch("setTitle",currentPageName)
}
methods : {
getCurrentPageNameByPath(path){
let path = '/profile/'
let currentPageName = ''
for(let item of items){
if(item.links) {
for(let nestdItem of item.links ){
if(nestdItem.to == path) {
currentPageName = item.title;
break;
}
}
}else {
if(item.to == path) {
currentPageName = item.title;
break;
}
}
}
console.log(currentPageName)
return currentPageName
}
}
你可以使用beforeRouteEnter钩子，
beforeRouteEnter (to, from, next) {
// document.title = to.title; // Optional set page title from here as well
store.dispatch("setTitle",to.title);
next();
}
你必须导入store，因为你不能在router钩子中访问$store