前端 - vue - - 多级路由嵌套,页面空白
答:拿elementui中的el-menu举例,确实是循环渲染路由及其children,但需要依据父id和子id的对应关系 将同级路由处理成嵌套路由,如1级菜单和2级菜单的路由都为同一级,但2级菜单具有parentId属性,1级菜单有id 无parentId,2级菜单的parentId 等于 1级菜单的id。像后台管理页面的layout侧边栏不就是根据路由的children渲染2级菜单、3级菜单的
·
问题:
router嵌套多级路由时 路径可跳转 但页面空白
解决方法:
需要在2级页面中加 <routerView/> 使3级页面的内容可在2级页面上渲染
(注意:2级路由的path有 / 3级路由的path无 / 访问3级页面的路径为 /2级path/3级path)
提问:
像后台管理页面的layout侧边栏不就是根据路由的children渲染2级菜单、3级菜单的吗?
答:拿elementui中的el-menu举例,确实是循环渲染路由及其children,但需要依据父id和子id的对应关系 将同级路由处理成嵌套路由,如1级菜单和2级菜单的路由都为同一级,但2级菜单具有parentId属性,1级菜单有id 无parentId,2级菜单的parentId 等于 1级菜单的id
在页面中 我们需要将路由依据parentId与id的关系嵌套成树形结构:
这样就可以实现常见的后台侧边栏了 但大多数情况下后台都要实现权限管理 那么路由就不会再放在前端 而是由后端返回 这是我们就需要去路由守卫里进行其他处理
更多推荐
所有评论(0)