vue项目 动态路由怎么做

Posted 2023-04-23

参考技术A

vue项目实现 动态路由 的方式大体可分为两种:

前端这边把路由写好，登录的时候根据用户的角色权限来动态展示路由，(前端控制路由)
详情可参阅 花裤衩大佬 的项目 手把手...

后台传来当前用户对应权限的路由表，前端通过调接口拿到后处理(后端处理路由)

这两种方法各有优点，效果都能实现，我们公司是通过第二中种方法实现的，原因就是公司项目里有一个专门的用户中心，里边逻辑很复杂，不好返给前端用户权限，担心路由放到前端不安全(以上的话是公司的后台同学讲的)，那好吧，抱着都试试、锻炼下自己能力的态度，我们搞了第二种方法。

大体步骤：拦截路由->后台取到路由->保存路由到localStorage(用户登录进来只会从后台取一次，其余都从本地取,所以用户，只有退出在登录路由才会更新)

菜单名字menName；
菜单路径menPath；
菜单指向的资源menuUrl(也就是组件地址, 一般从views层级开始写)

前端登录后通过接口请求拿到菜单数据后，

menName ---> name
menPath ---> path
menuUrl ---->components文件

转换时,用到这个方法找组件资源 把 menuUrl 可以变为components的格式，转为组件文件

生成路由表

可以再过滤一遍生成的路由表
下面这个方法找到views底下所有的组件资源

路由表里路由的组件在所有组件资源里没找到时，将该路由的path变为/404

getRouter.push( path: \'*\', redirect: \'/404\', hidden: true );
router.addRoutes(getRouter); //动态添加路由

前置工作：配置项目路由文件，该文件中没有路由，或者存在一部分公共路由，即没有权限的路由

每个路由都使用到组件Layout,这个组件是整体的页面布局:左侧菜单列，右侧页面,所以children下边的第一级路由就是你自己的开发的页面,meta里包含着路由的名字，以及路由对应的icon;
因为可能会有多级菜单，所以会出现children下边嵌套children的情况;
路由是数组格式

实际前端需要的 component是 component: () => import(\'@/views/content/classify\'),

因为有多级路由的出现，所以要写成遍历递归方法，确保把每个component转成组件对象
因为后台传回的是字符串，所以要把加载组件的过程 封装成一个方法，用这个方法在遍历中使用;详情查看项目里的router文件夹下的 _import_development.js和_import_production.js文件
Layout我放的目录跟其他文件的目录不一样，所以我在遍历里单独处理，各位小伙伴可自己调整哈

beforeEach路由拦截，进入判断，如果发现本地没有路由数据，那就利用axios后台取一次，取完以后，利用localStorage存储起来，利用addRoutes动态添加路由，

ps：beforeEach好坏啊，一步小心就进入到了他的死循环，浏览器都tm崩了，得在一开始就加判断，拿到路由了，就直接next()，嘤嘤嘤
global.antRouter是为了传递数据给左侧菜单组件进行渲染

上边第三步会给 global.antRouter赋值，这是一个全局变量（可以用vuex替代），菜单那边拿到路由，进行渲染

动态路由 NuxtJS

【中文标题】动态路由 NuxtJS

【英文标题】：Dynamic Routes NuxtJS

【发布时间】：2020-09-07 10:23:52

【问题描述】：

我想知道如何在 nuxtjs 中重命名路由。

特别是，我有一个名为 products 的文件夹，其中包含 _id.vue 和 index.vue 文件。但是，我不希望路由是 www.mysite.com/products/productID，而是 www.mysite.com/productID。也就是说，我想从路由中移除产品。

知道我该怎么做吗？

【参考方案1】：

Docks suggest that top-level dynamic routes will work fine。查看示例中的_slug 文件夹。

因此，以下文件夹结构有效：

pages
--| _product/
-----| index.vue

在您的index.vue 中，您可以通过$route 对象（check this answer for more details）访问product 参数，因此，它可以包含如下内容：

<!-- pages/_product/index.vue -->
<template>
    <div class="flex items-center justify-center text-center py-20">
         $route.params.product 
    </div>
</template>

<script>
export default 
</script>

我已经对此进行了测试，并且可以正常工作。如果进行此设置，您将转到www.mysite.com/shampoo/，您将看到shampoo 出现在屏幕上，如果您转到www.mysite.com/r2-d2/，您将看到r2-d2，依此类推。

【讨论】：

是的，我在 pages 文件夹下有一个 products 文件夹，在那个产品中我有 index 和 _product 文件......我想要的是从 url 中删除 /products 并只留下 productID 以便网址就像这个 websie/productID 而不是 website/products/productID

@oussemasallemi 我已经用更清晰的解释和示例更新了答案

对不起，我试过了，但没有成功，谢谢你花时间考虑

@oussemasallemi 感谢您的礼貌反馈！ :) 我花了一些时间来测试我提出的结构并且它有效。我已经更新了答案，以更好地说明如何使用它。