Vue动态路由设置技巧与实现方法详解

vue项目动态路由怎么做

Vue项目实现动态路由的方式大致可以分为两种:

后台广播一张与当前用户权限相关的路由表,从前端获取后端通过接口配置处理路由

两种方式各有优点,我们公司采用的是第二种方式。
之所以采用这种方式,是因为公司的项目有专门的用户中心,内部逻辑非常复杂,很难给前端用户返回权限。
前端路由(上面的话是公司后端同学说的)嗯,我们接受了第二种方法,并抱着尝试和训练它的心态。

后台获取路径-->将路径存储到localStorage中(只有用户登录时从后台获取路径,其余的都是本地获取的,所以用户只有登录后才能获取路径out)

菜单名称menName菜单路径menPath资源menuUrl(即组件地址,通常从视图级别开始编写)

从前端登录后,通过接口请求获取菜单数据;

namemenPath--->pathmenuUrl---->ComponentsFile

转换过程中,查找组件来源;将menuUrl转换为组件格式,并转换为组件文件

创建路由表

生成的路由表可以通过下面的方法进一步过滤,找到Views下的所有组件资源

当所有组件资源中没有找到路由表中的某个组件时;转向。
/routeto404

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

初步任务:配置项目路由文件文件没有路径或部分公共路径为未授权路径

各个路径使用组件Layout,即页面整体布局:左侧菜单栏;右页因此,children下的第一级路径是您自定义创建的页面;由于可以有多个元级别的菜单,因此它包含路径的名称和图标;路径将以数组格式位于子项下方

import('@/views/content/classify'),

出现是因为路由有几个步骤;所以遍历要保证每个组件都转换为组件对象因为我们需要写一个递归方法,并在后台返回字符串。
组件的加载过程必须封装为方法。
遍历时使用该方法查看详情_import_development.js和_import_development.js文件放在项目中的router文件夹下,如下。
其他文件的目录不同,所以我在遍历时分别处理。

在遍历各个路径之前,如果设备中未检测到路由数据,请输入结论。
使用axios后台获取一次;获得后,使用localStorage存储它并使用addRoutes动态添加路由。
步心进入了无限循环,浏览器一旦获得路径就可以直接执行next()。
渲染组件

上面第三步会给global.antRouter设置一个值,它是一个全局变量(可以用vuex替换)从菜单获取路径并渲染

如何实现动态路由

1、使用vue-router实现的简单路由功能中的路由导航功能不能传递参数,也就是说是静态路由。
2、对于可以传递参数的路由方式,由于可以传递参数,所以它对应的路径数量是不确定的,所以称为可变线路。
3、在参数名前面添加,这样定义后把参数写在路径里,就全部匹配了,所以这样定义的行数是不确定的。
4、如果需要传入多个参数值,只需按照上面的命名方式添加参数,并以轮换方式传入对应的指定参数值即可。
5、如果想在对应的组件页面输出指定的参数值,则在默认路径中添加以下代码即可。
6.那么,当你复用一个组件时,如果你想响应路由参数的变化,你应该为对象的变化添加跟踪功能。

相关推荐

手机内存扩展大小设置多少合适

手机内存扩展大小设置多少合适

手机512g内存卡分配单元大小多少合适当今社会,手机存储的重要性越来越凸显。随着智能手机功能的扩展,对存储空间的需求也在不断增加。512GB存储卡的出现,给了手机用户更多

虚拟化技术开启还是关闭好

虚拟化技术开启还是关闭好

intel虚拟化是不是开着好?是否启用英特尔虚拟化技术取决于用户的需求。如果您想在计算机上运行虚拟软件,建议启用Intel虚拟化技术。启用英特尔虚拟化技术可以提高虚拟化软件

kvm虚拟机和docker容器是目前

kvm虚拟机和docker容器是目前

如何区分应用所在的运行环境:物理机、虚拟机、容器还是K8s?本文将提供一种简单的方法来识别应用程序是否运行在物理机、虚拟机、容器或K8s环境上。不同环境下的识别方法有所不