在若依框架（前端基于Vue + Vue Router）中实现带参数的页面跳转，主要有两种方式：**Query** 和 Params。它们就像给目标页面递纸条，一个把参数写在地址栏上（显式），另一个藏在口袋里递过去（隐式）。

🧩 方式一：使用 Query 传参 (显式传参)

这种方式参数会直接拼接在 URL 后面（如 /user?id=1），优点是刷新页面参数不会丢失，非常适合**列表页跳转详情页**这类场景。

1. 配置路由
打开 src/router/index.js，在若依的公共路由下添加你的目标页面路由。path 是你访问的路径，name 是路由别名：

  {
    // 外层路径，随便写
    path: '/student',
    component: Layout,
    hidden: true,
    children: [
      {
        // 内层路径，完整访问路径是 /student/score
        path: 'score',
        // 这里写你的vue文件路径
        component: () => import('@/views/student/score'),
        name: 'Score',
        meta: { title: '成绩详情' }
      }
    ]
  }

建议新页面不要挂在菜单栏下，可以设置 hidden: true 。

2. 在源页面执行跳转
在你的表格或按钮点击事件里，使用 this.$router.push：

  // 假设这是查看详情的点击事件
  handleViewDetail(row) {
    this.$router.push({
      // 这里填上面配置的完整路径
      path: '/student/score',
      query: {
        id: row.id,
        name: row.name
        // 如果传对象，建议用 JSON.stringify 转成字符串
        // data: JSON.stringify(row)
      }
    })
  }

3. 在目标页面接收参数
在目标页面的 created 或 mounted 生命周期中接收：

  export default {
    created() {
      // 使用 this.$route.query 来接收
      const userId = this.$route.query.id
      const userName = this.$route.query.name
      
      if (userId) {
        console.log('接收到的id:', userId)
        // 调用接口获取详情数据
        this.fetchDetail(userId)
      }
    }
  }

🧩 方式二：使用 Params 传参 + 动态路由 (隐式传参/路径参数)

这种方式参数是路径的一部分（如 /user/123），URL 更美观，适合 SEO 或需要将 ID 体现在路径中的场景。注意，使用 Params 通常推荐**用 name 配合动态路由**。

1. 配置动态路由
修改 src/router/index.js，在 path 中用 :paramName 定义参数位置：

  children: [
    {
      // 注意这里的 :id ，表示该位置是动态参数
      path: 'detail/:id',
      component: () => import('@/views/student/detail'),
      name: 'StudentDetail',
      meta: { title: '学生详情' }
    }
  ]

2. 执行跳转
这里推荐使用 name 进行跳转，代码更简洁：

  // 源页面跳转逻辑
  handleViewDetail(row) {
    this.$router.push({
      // 使用路由配置的 name
      name: 'StudentDetail',
      // 参数写在 params 里，必须与 path 中的 :id 对应
      params: {
        id: row.id
      }
    })
  }

3. 接收参数

  export default {
    created() {
      // 通过 this.$route.params 接收
      const userId = this.$route.params.id
      console.log('路径中的id:', userId)
    }
  }

注意：Params 传参时，如果刷新页面数据可能会丢失。因此若依官方示例通常推荐 Query 方式传参，若使用 Params，建议配合动态路由将参数固化在路径中 。

📝 补充说明：非编码页面的跳转

除了写代码，若依也支持通过菜单配置跳转：
1. 进入【系统管理】->【菜单管理】。
2. 新增菜单，将【菜单类型】选为“**外链**”或“**目录**”。
3. 在【路由地址】填写目标 URL（外链）或前端路由 path 。