有什么办法可以在 vuejs 路由器中使用动态 routes/components 吗？

Question

嗨美丽的 Vuejs 开发者！ 我在动态路由许多 Vue components/pages 时遇到了一点问题。在这种情况下，我使用嵌套路由来为我的布局组件提供几个路由，为我的页面提供数百个子路由，正如您可以想象的那样，我将不得不静态或手动键入许多子路由，然后在我添加更多时在未来的代码更改中需要更多的子路由，但我需要一个解决 simplify/solve 这个问题的方法，使用更多 efficient/better 方法，比如在 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中的params，我可以用路由器内部的param值本身来表示吗？

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

如果有解决这个问题的有效方法，请告诉我。提前致谢！

Answer 1

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

我最好的猜测是有一个处理程序组件，它根据路由参数动态呈现一个组件（假设您有 /:subpage 作为 /student 的子项并且处理程序组件设置为该路由），以及围绕该路由的异常处理程序，以在用户输入 inexistent/unsupported 路由时显示 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,
            },
        ],
    },
]

SubpageRenderer.vue

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

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

如果 subpage 是已注册组件的名称，您还可以使用 subpage 路由属性来绑定 :is，而不是使用 currentSubpage 导入。

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

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

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

有什么办法可以在 vuejs 路由器中使用动态 routes/components 吗？

Is there any way to have dynamic routes/components in vuejs router?

vue.js

vue-router

vuejs3

vuejs-routing

vue-router4