Routing

---

Once check Link Below:

Link:vue-router

In a single-page application, you change what the user sees by showing or hiding portions of the display that correspond to particular components, rather than going out to the server to get a new page. As users perform application tasks, they need to move between the different views that you have defined.

To handle the navigation from one view to the next, you use the Vue Router. The Router enables navigation by interpreting a browser URL as an instruction to change the view. Your complete route structure is place at index.js file under src/Router/index.js

Basic Route

Following are the fundamental building blocks to creating a route.

	import { createRouter, createWebHistory } from "vue-router";
	import MainDashboard from "../Shared/Layouts/MainDashboard.vue";

const routes = [
{
component: MainDashboard,
children:[
{
	path: `${import.meta.env.BASE_URL}/`,
	redirect: `${import.meta.env.BASE_URL}dashboard`,
	component: () => import("../components/dashboard/Dashboard.vue"),
},
{
path: `${import.meta.env.BASE_URL}/`,
name: "Maindashboard",
component: () =>import("../components/dashboard/Dashboard.vue"),
},

{
path: `${import.meta.env.BASE_URL}/dashboard`,
name: "Dashboard",
component: () => import("../components/dashboard/Dashboard.vue"),
},
													
{
path: `${import.meta.env.BASE_URL}crypto/crypto-dashboard`,
name: "Crypto Dashboard",
component: () =>import("../components/cryptocurrencies/cryptodashboard/Cryptodashboard.vue"),
},
		],
	},
];
const router = createRouter({
	history: createWebHistory(),
	routes,
  });
  
  export default router;

Configure Link in Menu

---

To Add new link in Sidemenu

Following are the fundamental building blocks to creating a new link.

        
├── src
	├──shared
		├──Sidebar
			├──Sidebar.vue
			<script>
				export default {
						data() {
						return {
						MENUITEMS: [
       	 					{
      				    		headTitle: "dashboard",
      						  },
       						 {
         					 path: `${import.meta.env.BASE_URL}dashboard`,
         					 title: "Dashboard",
         					 type: "link",
          					icon: "ti-home",
        				  	active: true,
       						 },

        					{
         					 title: "Crypto Currencies",
        					icon: "ti-wallet",
      						type: "sub",
        					  active: false,
         					 children: [
         				   {
          				   	 	path: `${import.meta.env.BASE_URL}crypto/crypto-dashboard`,
           					  title: "Dashboard",
             				 	type: "link",
            			  		active: false,
         				   },
        			   	 {
             					 path: `${import.meta.env.BASE_URL}crypto/marketcap`,
             					 title: "Marketcap",
            					  type: "link",
            					  active: false,
           				 },
          					  {
              				path: `${import.meta.env.BASE_URL}crypto/currency-exchange`,
             				 title: "Currency Exchange",
             				 type: "link",
              				active: false,
         			   },
          				  {
          				    path: `${import.meta.env.BASE_URL}crypto/buy-sell`,
           					  	 title: "Buy & Sell",
            				  		type: "link",
             						 active: false,
							},
						}
					}

				}
</script>