When it comes to templates, the vuestic-admin template from https://github.com/epicmaxco/vuestic-admin stands out as the perfect fit for my needs. However, I have a specific requirement to customize it by adding a new page without displaying it in the sidebar. To achieve this, I need to define a new router. The challenge I am facing is understanding how to add this new router.
Here is what I have done so far:
Firstly, I created a .vue file located at components/contact/Contact.vue. Here is its code:
<template>
<div class="contact">
<div class="row">
<div class="col-md-12">
<p>contact</p>
</div>
</div>
</div>
</template>
<script>
export default { name: 'contact' }
</script>
<style lang="scss"></style>
Secondly, I added a new .js file at store/modules/contact.js. The code is as follows:
import lazyLoading from './lazyLoading'
export default {
name: 'Contact',
path: '/contact',
component: lazyLoading('contact/Contact'),
meta: {
default: false,
title: 'menu.contact',
iconClass: 'vuestic-icon vuestic-icon-extras'
}
}
Thirdly, within the store/modules/menu/index.js file, I updated the state definition by including pages:
import contact from './contact'
const state = {
pages: [
contact
],
items: [
dashboard,
statistics,
forms,
tables,
ui,
extra,
auth
]
}
Fourthly, in the router/index.js file, I made the following changes:
export default new Router({
routes: [
...generateRoutesFromMenu(menuModule.state.items),
{path: '*', redirect: { name: getDefaultRoute(menuModule.state.items).name }},
...generateRoutesFromMenu(menuModule.state.pages),
{path: '*', redirect: { name: getDefaultRoute(menuModule.state.pages).name }}
]
})
Upon compiling these changes, I encountered a console error:
Uncaught TypeError: Cannot read property 'name' of undefinedIn my understanding (and assumption), the issue may lie in the fourth step.
I would greatly appreciate any guidance on resolving this problem. Thank you!