element plus 动态路由无效问题（已解决）

jiarg

已于 2022-10-25 23:28:48 修改

阅读量872

点赞数

分类专栏：笔记文章标签： vue.js 前端 javascript

于 2022-10-25 23:18:51 首次发布

本文链接：https://blog.csdn.net/weixin_38565317/article/details/127524117

版权

笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

动态路由配置：

原动态路由：

  let titleValue;
  for (const x in rows) {
    titleValue = rows[x].processName + '（' + rows[x].taskName + '）';
    router.addRoute({
      hidden: true,
      component: Layout,
      path: '/link/' + rows[x].formKey,
      children: [{
        path: 'index/:status_task',
        name: 'link' + rows[x].formKey,
        meta: {
          title: titleValue,
          activeMenu: getActiveUrl(rows[x].formUrl)
        },
        component: () => import('../views/' + rows[x].formUrl)
      }]
    });
  }

打包部署Nginx环境后发现不能正常跳转，通过 import.meta.glob 语法改造。

现动态路由：

  let titleValue;
  const modules = import.meta.glob(`../views/**/*.vue`);
  for (const x in rows) {
    titleValue = rows[x].processName + '（' + rows[x].taskName + '）';
    router.addRoute({
      hidden: true,
      component: Layout,
      path: '/link/' + rows[x].formKey,
      children: [{
        path: 'index/:status_task',
        name: 'link' + rows[x].formKey,
        meta: {
          title: titleValue,
          activeMenu: getActiveUrl(rows[x].formUrl)
        },
        component: modules['../views/' + rows[x].formUrl + '.vue']
      }]
    });
  }

index.js的router改造

原路由配置

const router = createRouter({
  // base: '/production',
  history: createWebHistory(),
  routes: constantRoutes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  },
});

改造后配置：

const router = createRouter({
  // base: '/production',
  history: createWebHashHistory(),
  routes: constantRoutes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  },
});