One core feature of Vue is the file system router. Every Vue file inside the pages/ directory creates a corresponding URL (or route) that displays the contents of the file. By using dynamic imports for each page, Vue leverages code-splitting to ship the minimum amount of JavaScript for the requested route.
Vue routing is based on vue-router and generates the routes from every component created in the pages/ directory, based on their filename.
This file system routing uses naming conventions to create dynamic and nested routes:| pages/
---| about.vue
---| index.vue
---| posts/
-----| [id].vue{
"routes": [
{
"path": "/about",
"component": "pages/about.vue"
},
{
"path": "/",
"component": "pages/index.vue"
},
{
"path": "/posts/:id",
"component": "pages/posts/[id].vue"
}
]
}
Following are the fundamental building blocks to creating a new link. Path for existing code path: "data/menuData.js".
├── data
├──menuData.js
export const menuData = [
{
// To add the menu title
{
menuTitle: 'MAIN'
},
// To add the link
{
path: '/task/kanban-board',
type: 'link',
title: 'Kanban Board',
selected: false,
active: false,
dirchange: false,
},
// To add the sub
{
type: 'sub',
title: 'Task',
icon: 'bx bx-task',
badge: 'New',
badgeColor: 'bg-secondary-transparent',
selected: false,
active: false,
dirchange: false,
children: [
{
path: '/task/kanban-board',
type: 'link',
title: 'Kanban Board',
selected: false,
active: false,
dirchange: false,
},
]
}
// In the same way you can add "n" no.of sub/links in sub, But you can not add the sub inside the type "link" as well as in menutitle.
}
]
├── data
├──menuData.js
export const menuData = [
{
// To remove the menu title
{
menuTitle: 'MAIN'
},
// To remove the link remove the complete object of the item
{
path: '/task/kanban-board',
type: 'link',
title: 'Kanban Board',
selected: false,
active: false,
dirchange: false,
},
// To remove complete the sub remove complete object if you want to have any item
from that link you can place it next where you want.
{
type: 'sub',
title: 'Task',
icon: 'bx bx-task',
badge: 'New',
badgeColor: 'bg-secondary-transparent',
selected: false,
active: false,
dirchange: false,
children: [
{
path: '/task/kanban-board',
type: 'link',
title: 'Kanban Board',
selected: false,
active: false,
dirchange: false,
},
]
}
// In the same way you can add "n" no.of sub/links in sub, But you can not add the sub inside the type "link" as well as in menutitle.
}
]