Exploring Vue Router

Vue Router is a routing library for Vue.js. It provides a way to organize and manage the navigation between pages. In this specific script "router.js", the router is being created.

Directory

"router.js" can be found in src/router.js

Explanation

// Import Vue Router
import { createRouter, createWebHistory } from 'vue-router';

This line imports the necessary functions createRouter and createWebHistory from the 'vue-router' package. These functions are used to create a router instance and define the type of history mode to be used (in this case, web history).

// Import components
import Home from './components/pages/Home.vue';
import MapToExcel from './components/pages/MapToExcel.vue';
import ExcelToMap from './components/pages/ExcelToMap.vue';
import PublishedMap from './components/pages/PublishedMap.vue';
import Contact from './components/pages/Contact.vue';
import Login from './components/pages/Login.vue';
import Register from './components/pages/Register.vue';
import Bookmark from './components/pages/Bookmark.vue';
import Profile from './components/pages/Profile.vue';
import Logout from './components/pages/Logout.vue';
import SharedMap from './components/pages/SharedMap.vue';
import Notification from './components/pages/Notification.vue';
import Verify from './components/pages/Verify.vue';
import ForgotPassword from './components/pages/ForgotPassword.vue';

Here, various components are imported. These components represent different pages of the application

// Define routes
const routes = [
  { path: '/', component: Home },
  { path: '/map-to-excel', component: MapToExcel },
  { path: '/excel-to-map', component: ExcelToMap },
  { path: '/published-map', component: PublishedMap },
  { path: '/contact', component: Contact },
  { path: '/login', component: Login },
  { path: '/register', component: Register },
  { path: '/bookmark', component: Bookmark },
  { path: '/profile', component: Profile },
  { path: '/logout', component: Logout },
  { path: '/shared-map/:fileName', component: SharedMap },
  { path: '/notification', component: Notification },
  { path: '/verify/:verificationCode', component: Verify },
  { path: '/forgot-password', component: ForgotPassword },
];

An array of route objects is created. Each object represents a route in the application, specifying the path (URL) and the corresponding component to be displayed when that route is accessed.

// Create the router instance
const router = createRouter({
  history: createWebHistory(),
  routes,
});

The router instance is created using createRouter. It takes an object as an argument, where history is set to createWebHistory() to enable web history mode, and routes is set to the array of route objects defined earlier.

// Export the router
export default router;

The router instance is exported, making it available for use in other parts of the application.