有没有办法在 vuejs 路由器中拥有动态路由/组件？

Posted 2023-02-22

【中文标题】有没有办法在 vuejs 路由器中拥有动态路由/组件？

【英文标题】：Is there any way to have dynamic routes/components in vuejs router?

【发布时间】：2022-01-01 01:52:47

【问题描述】：

你好漂亮的 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'),
 ,

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

【参考方案1】：

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

我最好的猜测是有一个处理程序组件，它根据路由参数动态呈现组件（假设您有 /: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>

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

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

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

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

【讨论】：

嘿?谢谢你的回复。您的意思是在子组件中使用 $route.params，然后在其中处理所有子组件的路由吗？

类似的东西...我已经想多了，因为我可以访问我的笔记本电脑，这就是我想出的实际代码，但请注意 - 它是未经测试，我会将其编辑到主要评论中！

非常感谢?您的回答真的很有帮助，我会测试一下:)）

我还将您的答案标记为已接受，因为（至少目前）我认为没有其他方法！谢谢?