vue项目动态路由怎么做
Vue项目实现动态路由的方式大致可以分为两种:
后台广播一张与当前用户权限相关的路由表,从前端获取后端通过接口配置处理路由
两种方式各有优点,我们公司采用的是第二种方式。
之所以采用这种方式,是因为公司的项目有专门的用户中心,内部逻辑非常复杂,很难给前端用户返回权限。
前端路由(上面的话是公司后端同学说的)嗯,我们接受了第二种方法,并抱着尝试和训练它的心态。
菜单名称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.那么,当你复用一个组件时,如果你想响应路由参数的变化,你应该为对象的变化添加跟踪功能。