ruoyi-ui前端配置页面跳转子菜单

创建目标页面的路由

修改前端路由src/router下index.js文件

新建目标页面的路由

{
  path: '/student',
  component: Layout,
  hidden: true,
  redirect: 'student',
  children: [
    {
      path: 'studentScore',
      component: () => import('@/views/qianduan/routerSalta/ScoreCard'),
      name: 'studentScore',
      meta: { title: '学生成绩展示' }
    }
  ]
}

path 定义了主路由的路径
component 表示该路由对应的主组件
hidden: true 表示该路由在侧边栏导航或者面包屑中不会被显示
redirect 表示访问 ‘/student’ 时会自动重定向到 ‘student’
children 定义了子路由的数组
- path 定义了子路由的路径为 ‘studentScore’，所以完整的访问路径为 ‘/student/studentScore’
- component 表示该子路由对应的组件是动态导入的(懒加载)
- name 定义了路由的名称，可以在 <router-link :to="{ name: 'recipeAdviceCard' }"> 这样的语法中使用
- meta 定义了路由的元信息

给按钮编写路由跳转方法，并携带参数


this.$router.push({
          path:'/student/studentScore',
          query:{
            id:row.id,
            form:JSON.stringify(this.form)
          }
        })

在目标页面中拿到路由的参数并在页面进行展示

created() {
  //如果路由参数存在
  if (this.$route.query.id && this.$route.query.form) {
    this.studentId = this.$route.query.id;
    this.areaObj = JSON.parse(this.$route.query.form);
    console.log(this.studentId,"studentId-------------")
    console.log(this.areaObj,"areaObj-------------")
  }
  if (this.areaObj) {
    this.from2=this.areaObj;

  }
},