我的代码像
<v-navigation-drawer v-model="drawer" clipped app>
<v-list dense>
<span v-for="navitem in navitems" :key="navitem.subtitle">
<v-subheader v-if="navitem.subtitle">{{ navitem.subtitle }}</v-subheader>
<span v-if="navitem.subitem">
<v-list-group :prepend-icon="navitem.icon" v-model="navitem.active">
<template v-slot:activator>
<v-list-item-title>{{ navitem.title }}</v-list-item-title>
</template>
<span v-for="subitem in navitem.subitems" :key="subitem">
<span v-if="subitem.miniitems">
<v-list-group sub-group>
<template v-slot:activator>
<v-list-item-content>
<v-list-item-title style="margin-left:10px">{{ this.$i18n.$t('subitem.title') }}
</v-list-item-title>
</v-list-item-content>
</template>
<span v-if="subitem.mini">
<span v-for="mini in subitem.miniitems" :key="mini">
<v-list-item router link :to="mini.routes">
<!-- don't remove this -->
<v-list-item-icon>
<!-- <v-icon>{{ mini.name }}</v-icon> -->
</v-list-item-icon>
<v-list-item-title v-text="mini.title"></v-list-item-title>
</v-list-item>
</span>
</span>
</v-list-group>
</span>
<span v-else>
<v-list-item sub-group router link :to="subitem.routes">
<v-list-item-content>
<v-list-item-title v-text="subitem.title" style="margin-left: 57px;">
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</span>
</span>
</v-list-group>
</span>
<span v-else>
<v-list-item router link :to="navitem.routes">
<v-list-item-icon>
<v-icon>{{ navitem.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-title>{{ navitem.title }}</v-list-item-title>
</v-list-item>
</span>
</span>
</v-list>
<v-divider></v-divider>
</v-navigation-drawer>
具有以下数据。...
navitems: [{
icon: 'dashboard',
title: 'Dashboard',
subtitle: 'Pages',
active: false,
subitem: true,
routes: '',
subitems: [{
title: 'Default',
active: true,
mini: true,
routes: '/',
}, {
title: 'Analytics',
active: true,
routes: '/dashboardanalytics',
}, {
title: 'Ecommerce',
active: true,
routes: '/dashboardecommerce',
}, {
title: 'Social',
active: true,
routes: '/dashboardsocial',
}, {
title: 'Crypto',
active: true,
routes: '/dashboardcrypto',
}]
}, {
icon: 'library_books',
title: 'Pages',
active: false,
subitem: true,
subitems: [{
title: 'Profile',
routes: '/profile'
}, {
title: 'Settings',
routes: '/settings'
}, {
title: 'Clients',
routes: '/clients'
}, {
title: 'Projects',
active: true,
routes: '',
mini: true,
miniitems: [{
title: 'List',
routes: '/list'
}, {
title: 'Detail',
routes: '/detail'
}]
}, {
title: 'Invoice',
active: true,
routes: '/invoice'
}, {
title: 'Pricing',
active: true,
routes: '/pricing'
}, {
title: 'Tasks',
active: true,
routes: '/tasks'
}, {
title: 'Chat',
active: true,
routes: '/chat'
}, {
title: 'Blank Page',
active: true,
routes: '/blank-page'
}]
}, {
icon: 'group',
title: 'Auth',
active: false,
subitem: true,
routes: '',
subitems: [{
title: 'Sign In',
routes: '/signin',
active: true
},
{
title: 'Sign Up',
routes: '/signup',
active: true
},
{
title: 'Reset Password',
routes: '/reset-password',
active: true
},
{
title: '404 Page',
routes: '/404',
active: true
},
{
title: '500 Page',
routes: '/500',
active: true
},
],
}, {
icon: 'import_contacts',
title: 'Documentation',
active: false,
subitem: true,
subitems: [{
title: 'Introduction',
routes: '/introduction',
},
{
title: 'Getting Started',
routes: '/getting-started',
}, {
title: 'Plugins',
routes: '/plugins'
}, {
title: 'Changelog',
routes: '/changelog'
}
],
}, {
icon: 'layers',
title: 'UI Elements',
subtitle: 'Tool & Components',
subitem: true,
active: false,
subitems: [{
title: 'Alerts',
routes: '/alerts'
}, {
title: 'Buttons',
routes: '/buttons'
}, {
title: 'Cards',
routes: '/cards'
}, {
title: 'Carousel',
routes: '/carousel'
}, {
title: 'Embed Video',
routes: '/embed-video'
}, {
title: 'General',
routes: '/general'
}, {
title: 'Grid',
routes: '/grid'
}, {
title: 'Modals',
routes: '/modals'
}, {
title: 'Tabs',
routes: '/tabs'
}, {
title: 'Typography',
routes: '/typography'
}]
}, {
icon: 'favorite',
title: 'Icons',
subitem: true,
active: false,
subitems: [{
title: 'Matrial Design Icon',
routes: '/mtd'
}, {
title: 'Font Awesome 5',
routes: '/FA5'
}]
}, {
icon: 'done',
title: 'Forms',
subitem: true,
active: false,
subitems: [{
title: 'Layouts',
routes: '/layouts'
}, {
title: 'Basic Inputs',
routes: '/basic-inputs'
}, {
title: 'Input Groups',
routes: '/input-groups'
}]
}, {
icon: 'table_chart',
title: 'Tables',
routes: '/table'
}, {
icon: 'check_box',
title: 'Form Plugins',
subtitle: 'Plugin & Addons',
subitem: true,
active: false,
subitems: [{
title: 'Advanced Inputs',
routes: '/advanced-inputs'
}, {
title: 'Editors',
routes: '/editors'
}, {
title: 'Validation',
routes: '/validation'
}, {
title: 'Wizard',
routes: '/wizard'
}]
}]
我想使用i18n来显示可见的文本（标题，文本）以进行国际化...。但是我目前无法提供任何帮助...。我正在使用i18n.js
const messages = {
'us': {
dashboard: 'Dashboard',
profile: 'Profile',
analytics: 'Analytics',
settings: 'Settings',
help: 'Help',
signout: 'Sign Out',
},
'np': {
dashboard: 'ड्यासबोर्ड',
profile: 'प्रोफाइल',
analytics: 'विश्लेषण',
settings: 'सेटिंग्स',
help: 'मद्दत',
signout: 'साइन आउट गर्नुहोस्',
}
};
const i18n = new VueI18n({
locale: 'us', // set locale
fallbackLocale: 'np', // set fallback locale
messages, // set locale messages
});
export default i18n;
[我知道他们现在只是这里数据的仪表板，但是我迷失了如何翻译标题和文本...我尝试了{{$ t（'navitem.subtitle'）}}}，但不要认为会起作用...我尝试了其他方法，但不起作用....
'en'而不是'us'作为语言。尽管'en-us'可能是有效的语言代码，但我不确定'us'是否正确。const i18n = new VueI18n({
locale: 'en',
fallbackLocale: 'np',
messages: {
'en': {
analytics: 'Analytics',
dashboard: 'Dashboard',
detail: 'Detail',
ecommerce: 'E-Commerce',
list: 'List',
pages: 'Pages',
profile: 'Profile',
projects: 'Projects',
'select-language': 'Select language',
settings: 'Settings',
},
'np': {
analytics: 'विश्लेषण',
dashboard: 'ड्यासबोर्ड',
detail: 'विवरण',
ecommerce: 'e- वाणिज्य',
list: 'सूची',
pages: 'पृष्ठहरु',
profile: 'प्रोफाइल',
projects: 'प्रोजेक्टहरू',
'select-language': 'भाषा छनोट गर्नुस',
settings: 'सेटिंग्स',
}
}
})
[接下来，这是实现为Vue路由器实例的导航项目。请注意，我没有为每条路线
NOT都包含一个要将这些内容合并到您的应用程序中，您的主Vue实例应以如下方式实例化：component属性，但是您需要在自己的应用中执行此操作。另请注意，对于icon属性，我使用了Vuetify内置的material design icons。
const router = new VueRouter({ routes: [ { name: 'dashboard', path: '/dashboard', meta: { icon: 'mdi-view-dashboard', }, children: [ { name: 'analytics', path: '/analytics', meta: { icon: 'mdi-finance', }, }, { name: 'ecommerce', path: '/ecommerce', meta: { icon: 'mdi-store', }, }, ], }, { name: 'pages', path: '/pages', meta: { icon: 'mdi-book-open-variant', }, children: [ { name: 'settings', path: '/settings', meta: { icon: 'mdi-cogs', }, }, { name: 'projects', path: '/projects', meta: { icon: 'mdi-briefcase', }, children: [ { name: 'list', path: '/list', meta: { icon: 'mdi-format-list-bulleted', } }, { name: 'detail', path: '/detail/:id', meta: { icon: 'mdi-file-document', } }, ], }, ], }, { name: 'profile', path: '/profile', meta: { icon: 'mdi-account-circle', }, }, ], })
new Vue({
vuetify: new Vuetify(),
i18n,
router,
render: h => h(App),
}).$mount('#app')
最后，这是我用来生成菜单的模板。我提供了一个语言切换器，因此您可以看到它来回切换。这应该与您所拥有的非常相似。
<v-navigation-drawer permanent>
<v-toolbar color="primary" dark prominent>
<v-toolbar-title>
<p class="overline">{{ $t('select-language') }}:</p>
<v-radio-group
v-model="$i18n.locale"
:mandatory="true"
>
<v-radio label="नेपाल" value="np"></v-radio>
<v-radio label="English" value="en"></v-radio>
</v-radio-group>
</v-toolbar-title>
</v-toolbar>
<v-list dense expand nav>
<template v-for="route in $router.options.routes">
<v-list-item
v-if="!route.children"
color="primary"
:key="route.name"
:to="route.path"
>
<v-list-item-icon>
<v-icon>{{ route.meta.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-title>{{ $t(route.name) }}</v-list-item-title>
</v-list-item>
<v-list-group
v-else
:group="route.path"
color="primary"
>
<template #activator>
<v-list-item-icon>
<v-icon>{{ route.meta.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-title>
{{ $t(route.name) }}
</v-list-item-title>
</template>
<template v-for="child in route.children">
<v-list-item
v-if="!child.children"
:key="child.name"
:to="route.path + child.path"
>
<v-list-item-icon>
<v-icon v-text="child.meta.icon" />
</v-list-item-icon>
<v-list-item-title>
{{ $t(child.name) }}
</v-list-item-title>
</v-list-item>
<v-list-group
v-else
color="primary"
:group="child.path"
sub-group
>
<template #activator>
<v-list-item-content>
<v-list-item-title>
<v-icon>{{ child.meta.icon }}</v-icon>
{{ $t(child.name) }}
</v-list-item-title>
</v-list-item-content>
</template>
<template v-for="grandchild in child.children">
<v-list-item
:key="grandchild.name"
color="primary"
:to="route.path + child.path + grandchild.path"
>
<v-list-item-title>{{ $t(grandchild.name) }}</v-list-item-title>
<v-list-item-icon>
<v-icon>{{ grandchild.meta.icon }}</v-icon>
</v-list-item-icon>
</v-list-item>
</template>
</v-list-group>
</template>
</v-list-group>
</template>
</v-list>
</v-navigation-drawer>
希望这会有所帮助！