Spruha - Vue-3 Admin Dashboard Template

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>
    
    
    
    								
Important License Terms
  • You cannot charge your end product end users with a Regular License.
  • If you want to collect payments from end product end users then you must buy an Extended License for each of the end product.
  • You must buy one license for one domain only.(i.e Either Regular or Extended)
  • You cannot use Multi Domain,Multi Client, Multiple end Products with any of the licenses (i.e Either Regular or Extended).

for more details please click the link