RuoYi-Vue手动路由配置与传参-针对RuoYi前后端分离Demo路由配置如下：需要在path中添加 /:id来对应

不使用内置菜单管理配置动态路由，使用手动配置路由方式

ruoyi自带菜单管理让我们能够直接通过配置的方式添加动态路由，该种方式是通过数据库存放菜单的表专门存放每个菜单对应的路由，并且可以该方法进行前端的路由权限控制；
现在的需求是配置一个详情页路由，但是我们并不希望把他显示在侧边栏中，因此我们尝试通过菜单配置路由并隐藏，但是菜单中获取的动态路由方法已经封装好了，默认是只获取属性为显示的路由，因此，这种方法配置的路由是无法成功的；
动态路由的获取方法解析：（暂时略，有时间再补）

所以我们尝试直接从 router-index.js 手动配置路由
例如：
教师页面的路由，在菜单管理中配置，为动态路由：

教师详情页面的路由配置如下：

// 教师库教师详情
{
  // 配置user二级路径 如果不配置user那么刷新后侧边栏会消失
  path: '/datacenter/user/',
  component: Layout,
  hidden: true,
  children: [
    {
      name: 'teacherext',
      path: 'teacherext',
      meta: { title: '指导老师基本信息' },
      component: () => import('@/views/datacenter/teacherext/index')
    }
  ]
},

需要注意的是：因为采用了嵌套结构，所以会出现刷新后侧边栏消失的问题，目前的解决办法是：配置的时候注意配置上一级的菜单，这里教师页面的上一级菜单是user,所以我们应该配置的路由基础路径必须包含/user/；
配置完成后，访问该页面的完整路径如下
[你的工程base路径]/datacenter/user/teacherext
缺点：如此一来，就无法使用动态路由进行前端页面的权限管理了，因此只要在url输入该路径，都可以访问该页面，但是我们可以在后端配置数据的访问权限，在没有权限时，给出提示；

路由跳转传参问题 3种以及分别存在的问题

当我们要在教师页面跳到详情页面时，需要给详情页面传参，让该页面知道需要显示什么内容；
第一种：(页面刷新不丢失) 使用path来匹配路由，然后通过query来传递参数，这种情况下 query传递的参数会显示在url后面会跟 ?id=？（也是本次案例使用的传参方式）
```
this.$router.push({
    path: '/datacenter/user/teacherext',
    query: {
      id: this.form.teacherId
    }
})
```
路由配置方式如上
获取参数方式：
```
this.$route.query.id
```
第二种：(页面刷新丢失) 使用name来匹配路由，使用params传参
可以在路由的path里加参数，加上参数以后刷新页面数据就不会丢了
```
this.$router.push({
    name: 'teacherext',
    params: {
      id: id
    }
})
```
路由配置同上
获取参数方式：
```
this.$route.params.id
```

第三种：(页面刷新不丢失) 直接让路由携带参数跳转

 //直接调用$router.push 实现携带参数的跳转
this.$router.push({
  path: `/datacenter/user/teacherext/${id}`
})

路由配置如下：需要在path中添加 /:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值

{
      // 配置user二级路径 如果不配置user那么刷新后侧边栏会消失
      path: '/datacenter/user/',
      component: Layout,
      hidden: true,
      children: [
        {
          name: 'teacherext',
          path: 'teacherext/:id',
          meta: { title: '指导老师基本信息' },
          component: () => import('@/views/datacenter/teacherext/index')
        }
      ]
    },

获取参数方式：

this.$route.params.id

RuoYi-Vue手动路由配置与传参-针对RuoYi前后端分离Demo

不使用内置菜单管理配置动态路由，使用手动配置路由方式

路由跳转传参问题 3种 以及分别存在的问题

参考：www.cnblogs.com/mengzekun/p…

路由跳转传参问题 3种以及分别存在的问题