Routing & Navigation

Let's create a page

How to create a page?

Create a File

Let's create an About Us page with Yoda Admin Vue Template.

First, we create our page file to src/view/pages/about/index.vue

Now we can start writing our code to index.vue

<template>
  <div>
    
  </div>
</template>

Create Route

After we create our page successfully. Let's create a route for our page.

Route file can be found src/router .

You can easily create your route for your page

{
    path: "/about",
    name: "about",
    component: () => import("@/view/pages/about"),
    meta: {
      title: "Aboout",
      breadcrumb: [
        {
          text: "Pages"
        }
      ]
    },
},

How to Create Navigation?

Now our page is online!🤘🏻

Let's create navigation for our page! 🚀

Navigation file can be found in src/navigation

Let's create a new menu item list as Company. First, we create a new file as company.js. This file will contain our menu items.

header prop will be the name of our menu item list's header. Let's call it Company

Our write-out menu item.

id prop is key of our menu item

title prop will be the name of our menu item. Let's call it About Us

With icon prop we can add icons to our menu items.

navLink prop will be the navigation link of our component.

Make sure navLink is as same as route path

Our navigation is ready. Let's add some submenu to our menu item

We use children prop as an array for our submenu items.

Now you can add your submenu items as same as a menu item

export default {
  header: "COMPANY",
  children: [
    {
      id: "company",
      title: "Company",
      icon: "Curved-Home",
      children: [
        {
          id: "about",
          title: "About",
          navLink: "/about",
        },
      ],
    },
  ]
}