Create New Page
This document describes how to create a new page in laravue. If you are familiar with the vue-router
then it will be very simple.
Add the route
Firstly, we have to add the route to the @/router/index.js
. For example:
add a foo
page
The below code will create a blank route based on Layout
{
path: '/foo',
component: Layout,
redirect: '/foo/index',
name: 'foo',
meta: {
title: 'foo',
icon: 'star',
},
}
Icon
Laravue offers 2 icon set (IconFont and ElementUI). You can see all icons here, and document here
Next, you have to add a route to the 'children' below it:
{
path: '/foo',
component: Layout,
redirect: '/foo/index',
meta: {
title: 'foo', // This title will show on the breadcrumb before submenu's title
icon: 'star', // Use star icon
},
children: [
{
path: 'index', // When clicking on this menu, it will redirect to /#/foo/index
name: 'foo',
meta: { title: 'foo' }, // Show `foo` on the sidebar
},
],
}
The sidebar will show foo
menu like this
Clicking on this menu will redirect to /#/foo/index
, and blank page will show (since we haven't imported the view). And there is no icon or the submenu because no icon declared.
TIP
Since children
only declares one route below, there will be no expansion arrow. If the number of routes under children
is greater than 1, there will be an expansion arrow, as shown below.
If you want to ignore this behaviour, you can use alwaysShow: true
, so that it will ignore the previously defined rule and display the root route. See the Router and Nav for details.
{
path: '/foo',
component: Layout,
redirect: '/foo/index',
name: 'foo',
meta: {
title: 'foo',
icon: 'star', // Using SVG icon
},
children: [
{
path: 'index', // When clicking this submenu, it will redirect to /#/foo/index
name: 'foo',
meta: { title: 'foo' }, // foo submenu
},
{
path: 'bar', // When clicking this submenu, it will redirect to /#/foo/bar
name: 'bar',
meta: { title: 'bar' }, // bar submenu
},
],
}
If you want to use ElementUI Icon for the menu, please use the icon class instead of svg name.
children: [
{
// a submenu code here
},
{
path: 'icons',
component: () => import('@/views/icons/index'),
name: 'Icons',
meta: {
title: 'icons',
icon: 'el-icon-info', // Use ElementUI icon like this
noCache: true
},
},
{
// a submenu code here
},
],
Nested Routes
If you have a nested Route, such as @/views/nested,
Don't forget to manually add an < router-view >
to the root file of the secondary directory.
For example: @/views/nested/menu1/index.vue.
Note: As many <router-view>
as the level of routes nested.
Create View
After adding the route, we have to create a view under @/views
folder. As usual, a router is associated with a view.
If components or utils are only used in this view, it's recommended to create a components/utils folder under this view. It is more convenient for each module to maintain its own utils
or components
.
Lets create a foo
folder in views
, with 2 view files as below:
├── app
├── resources
│ └── js
│ └── views // views
│ └── foo
│ ├── Foo.vue // Foo view
│ └── Bar.vue // Bar view
Open @/views/foo/Foo.vue
and add simple component like this:
<template>
<div class="app-container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card card-default">
<h3 class="card-header">Foo Component</h3>
<div class="card-body">
I'm a foo component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Foo component mounted.');
},
};
</script>
Then we have to import this Foo component to route. Back to @/router/index.js
to edit foo route
{
path: '/foo',
component: Layout,
redirect: '/foo/index',
meta: {
title: 'foo', // This title will show on the breadcrumb before submenu's title
icon: 'star', // Use star icon
},
children: [
{
path: 'index', // When clicking on this menu, it will redirect to /#/foo/index
component: () => import('@/views/foo/Foo.vue'),
name: 'foo',
meta: { title: 'foo' }, // Show `foo` on the sidebar
},
],
}
Save and reload the page, clicking on foo menu will show Foo component.
You can try to create Bar component and import to bar submenu. Seems easy.
I18n
Now we have foo menu on the sidebar, but switching language doesn't change foo
text to selected language. To add translation, we need to add translated text to @/lang/en.js
and other lang files, such as @/lang/vi.js
, under router
section.
// @/lang/en.js
export default {
route: {
...
foo: 'Foo',
// @/lang/vi.js
export default {
route: {
...
foo: 'Foo in VI',
Now switching language between EN and VI will show corresponding text.
TIP
You can see sample code here: How to create new page