Create New Page
How to Create a New Page
Here is the example on how to create your custom page and add it to the leftsidebar menu, breadcrumbs and also meta tag.
1. Create a new folder in src/views. ex. NewPage, and
then create a vue file in src/views/NewPage with name
index.vue
I) With Layout Example :-
-
For Create New Page With Layout.
-
Add pageHeader component. it's a common component, it's used to add breadcrumbs in your page.
- You have to pass 2 props here, first is title and second is item.
- the title prop refers to page title and the items array refers to page's breadcrumb item's title. and page title
-
Add MetaTags to give a html title to your page.
<script>
import Layout from "@/layouts/main.vue";
import PageHeader from "@/components/page-header";
export default {
components: {
Layout,
PageHeader,
},
};
</script>
<template>
<Layout>
<PageHeader title="title" pageTitle="items" />
// write your code here
</Layout>
</template>II) Without Layout Example :-
-
For Create New Page Without Layout.
-
Without Layout Page doesn't have pageHeader & breadcrumbs.
<script>
export default {
data() {
return {
title: "index",
};
},
};
</script>
<template>
// write your code here
</template>2. How to add new route ?
You can easily add, change or remove any route by simply making changes described below:
1. Open /src/router/routes.js file,
declare your route. E.g.
{
path: "/newpage/index",
name: "index",
meta: { title: "index", authRequired: true },
component: () => import("../views/newpage/index"),
},{ path: "/new-page", component: newPage }Each of these properties are explained below:
- path : Url relative path
- component : Actual component name which would get rendered when user visits the path
3. Add a navigation in the layouts
For more details, check the Layouts page to see how to add menu item in your template.
-
For Vertical Layout :-
/src/component/menu.vue -
For Horizontal Layout :-
/src/Layouts/horizontal.vue -
For Two Column Layout :-
/src/Layouts/twocolumn.vue -
For Semibox Layout :-
/src/Layouts/menu.vue