Question

动态路由器 VueJS

2023-02-04

333

vue.js dynamic vuejs3 vue-router

我正在尝试动态创建路由，但不幸的是我没有成功，而且使用 Vuejs 3 无法实现

import { createRouter, createWebHistory } from "vue-router";
import TopMenu from "../layouts/top-menu/Main.vue";
import hosts from '@/utils/hosts';
import Login from "../views/admin/login/Main.vue";
import Home from "../views/admin/home/Main.vue";
import Sair from "../views/admin/sair/Main.vue";

import { listaPaginas } from "@/composable/arthysis/paginas";

let routes = [];
var lstRoutes = [];

async function loadPage() {
  var { statuscode, message, data } = await searchPage();

    lstRoutes.push({
        path: `${hosts.app}` + "/home",
        name: "admManHome",
        component: Home,    
      });

    for (var i = 0; i < data.length; i++) {
      lstRoutes.push({
        path: `${hosts.app}/${data[i].path}`,
        name: data[i].name_page,
        component: () => import('../views/'+ data[i].path +'/'+ data[i].name_page +'.vue')
      });
  
    }

}

await loadPage();

routes = [
  {
    path: `${hosts.app}/`,
    name: "admManLogin",
    component: Login,

  },
  { 
    component: TopMenu,
    children: lstRoutes    
  }
];

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

export default router;

它给出了这个错误

vue-router.mjs:1486 Uncaught TypeError: Cannot read properties of undefined (reading 'forEach') at createRouterMatcher (vue-router.mjs:1486:12) at createRouter (vue-router.mjs:2942:21) at index.js?t=1675540466219:137:16

我试图创建一个函数来导入该组件，但它也给出了同样的错误

Answer 1

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()
})

Answer 2

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)