Create New Page

To create a page, we need to create routes and components, and write some import lines in a few files. In this guide, we will see how to use them.

=> First, navigate to the src/module folder and create a suitable module folder (e.g., car). Inside this module, create a new component (e.g.carDemoOne.vue) for your page under car/,

=> create a corresponding page file under pages/. Then, go to the src/pages folder and create a page file that imports the module's page component from src/module/car/carDemoOne.vue"

=> To create a new route instance in the Vue 3 project,Then, go to the src/router/routes.ts file and add the new route path under the appropriate route object (e.g., routes.Car.DemoOne = '/car/car-demo-one').Next, import the new page component in src/router/index.ts and register it in the Vue Router routes array using the constant from routes.ts as the path and the page component as the component. This approach ensures centralized route path management and keeps your route definitions clean and maintainable."

* You're asking how to start defining a route when you have two separate route files:

1) routes.ts → for declaring route paths as constants.

 // src/router/routes.ts //
 export const routes = {
  Car: {
        DemoOne: '/car/car-demo-one', // ✅ New route added
    },
 }                         

2) index.ts → for registering Vue Router routes using those constants.

  // src/router/index.ts
  import { createRouter, createWebHistory } from 'vue-router'
  import { routes } from './routes'
  import Body from '@/layout/Body.vue'
  // Import your components (pages)
  import CarDemoOne from '@/pages/car/carDemoOne.vue'
  
  // Define route array
  const router = createRouter({
    history: createWebHistory(),
    routes: [
    {
      path: '/',
      component: Body,
      children: [
          {
           path: routes.Car.DemoOne,
           name: 'CarDemoOne',
           component: CarDemoOne,
          }
        ]
      }
    ],
  })
  
  export default router