0

嗨，漂亮的 Vuejs 开发人员！ 我在动态路由许多 Vue 组件/页面时遇到了一点问题。在这种情况下，我使用嵌套路由来为我的布局组件设置几条路由，为我的页面设置数百条子路由，正如您可以想象的那样，我必须静态或手动输入许多子路由，然后在我添加更多路由时添加在未来的代码更改中需要更多子路由，但我需要一个解决方案来简化/解决这个问题，以更有效/更好的方式，比如在 url 布局后添加用户类型的路由......这是我的示例代码代码：

const routes: RouteRecordRaw[] = [
{
  {
    path: '/student',
    component: () => import('layouts/StudentLayout.vue'),
    children: [
      {
        path: 'dashboard',
        component: () => import('pages/student/Dashboard.vue'),
      },
      {
        path: 'profile',
        component: () => import('pages/student/Profile.vue'),
      },
    ],
  },
}

正如您在这段代码中看到的那样，我有一个名为 Student 的布局，它有两个孩子，但我必须为此布局手动输入数百个子路由，其他布局有什么方法可以使用用户输入的内容动态设置这些路由/student/dashboard 或 /layout/page 之类的布局名称并将其与组件名称匹配？我的意思是像 Angular 中的参数一样，我可以在路由器内部使用参数值本身来表示吗？

 {
    path: ':pagename',
    component: (pagename) => import('pages/student/' + pagename + '.vue'),
 },

让我知道是否有解决此问题的有效方法。提前致谢！

4

1 回答 1

0

我个人不会使用这种方法，也不会建议这种方法，我也没有这样做，但是当我阅读您的问题时，我想到了这个想法：

我最好的猜测是有一个处理程序组件，它根据路由参数动态呈现组件（比如你有/:subpage一个子/student组件并且处理程序组件设置为该路由），以及一个异常处理程序以显示 404 页面当用户输入不存在/不受支持的路线时。

例如，我会通过路由参数将组件动态导入到预定义的 let 中（例如let SubpageComponent;在 try catch 块之外），在动态导入分配周围有一个 try catch 块，用于相应的错误，其中 catch 会将变量设置为 404 页面. 然后我会将 SubpageComponent 添加到组件的 data() 中，以渲染路由。

编辑

我已经写出了一些可能有意义的代码。

它基于https://vuejs.org/v2/guide/components.html#Dynamic-Components

您的路线定义，已更改

const routes: RouteRecordRaw[] = [
    {
        path: '/student',
        component: () => import('layouts/StudentLayout.vue'),
        children: [
            {
                path: '/:subpage',
                component: () => import('pages/student/SubpageRenderer.vue'),
                props: true,
            },
        ],
    },
]

子页面渲染器.vue

<script>
export default {
    props: ['subpage'],
    data() {
        return {
            currentSubpage: () => import(`./${subpage}.vue`)
        }
    }
}
</script>

<template>
    <component :is="currentSubpage"></component>
</template>

如果是注册组件的名称currentSubpage，您也可以使用subpageroute 属性来绑定，而不是使用导入。:issubpage

由于这只会从路线中获得“仪表板”，因此您需要一些命名空间，例如借助模板文字的“学生仪表板”。您可以制作currentSubpage一个创建student-${subpage}名称的模板文字。

我可能会建议导入由subpage路由参数指定的组件的选项对象，而不是注册所有组件 - 如果您正在注册它们，您不妨按照通常的方式使用 vue-router :)

另外，我只认为这可行！它应该被测试出来，也许应该记住大小写，也许还有 Layout 后缀（subpage可能都是小写的，你可能会有用 PascalCase 命名的组件）。在将第一个字母大写后，这显然也可能导致两者/student/Dashboard都是/student/dashboard有效的路线

于 2021-11-22T13:47:42.200 回答