[Vuejs]-Dynamic router VueJS

by

0👍

✅

router

....
async function searchRoutes() {
var { statuscode, message, data } = await searchPage();
let lstRoutes = [];
    for (var i = 0; i < data.length; i++) {
      let dsPath = `${hosts.app}/${data[i].path}`
      if (data[i].parameter != '' && data[i].parameter != null) {
        dsPath += "/:"+data[i].parameter+"?";
      }

      lstRoutes.push({
        path: dsPath,
        name: data[i].name_page ,
        component: () => import('../views/'+ data[i].path +'/'+ data[i].name_page  +'.vue')
      });
  
    }
  return lstRoutes;
}

async function createRouterInstance() {
  let lstRoute = [];
    lstRoute.push({
        path: `${hosts.app}` + "/home",
        name: "admManHome",
        component: Home,    
      });

  let respRotas = await searchRoutes();

  let routes = [
    {
      path: `${hosts.app}/`,
      name: "admManLogin",
      component: Login,
    },
    { 
      component: TopMenu,
      children: lstRoute    
    }
  ];

  const router1 = createRouter({
    history: createWebHistory(),
    routes,
    scrollBehavior(to, from, savedPosition) {
      return savedPosition || { left: 0, top: 0 };
    },
  });

  return router1;
}

const router = await createRouterInstance();

vue-router.mjs:798 Uncaught (in promise) Error: No match for
{"name":"listUsers","params":{}}
at createRouterError (vue-router.mjs:798:23)
at Object.resolve (vue-router.mjs:1414:23)
at Object.resolve (vue-router.mjs:3045:38)
at Main.vue:44:94
at renderList (runtime-core.esm-bundler.js:2894:22)
at Main.vue:54:22
at renderList (runtime-core.esm-bundler.js:2894:22)
at Main.vue:58:18
at renderList (runtime-core.esm-bundler.js:2894:22)
at Proxy._sfc_render (Main.vue:61:14)

0👍

main.js

import { createApp, ref } from "vue";
import { createPinia, defineStore } from "pinia";
import App from "./App.vue";
import router from "./router";
import globalComponents from "./global-components";
import utils from "./utils";
import "./assets/css/app.css";
import hosts from '@/utils/hosts';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

const pinia = createPinia();

pinia.use(piniaPluginPersistedstate);

const app = createApp(App).use(router).use(pinia);

globalComponents(app);
utils(app);

app.mount("#app");

router.beforeEach(async (to, from, next) => {
     
     
     if ((localStorage.getItem("token") == undefined || localStorage.getItem("token") == null) && to.name != 'admManLogin') {

          localStorage.removeItem("token");
          localStorage.removeItem("dataExptoken");
          localStorage.removeItem("loja");

          next({ path: `${hosts.app}/` })
     }

     if (localStorage.getItem("dataExptoken") != undefined && Date.now() > localStorage.getItem("dataExptoken")) {

          localStorage.removeItem("token");
          localStorage.removeItem("dataExptoken");
          localStorage.removeItem("loja");

          next({ path: `${hosts.app}/` })
     }
     

     next()
})

Leave a comment