若依管理系统页面带参数跳转路由怎么写

前言

想写通过高德地图接口实现驾车路线规划，本来是两个页面想解决同一个页面不能用多个key（当然，后来不需要了，一个页面一个key解决了）不重要了，总之学到了新知识，现在有两个map.vue和Mapmap.vue页面，我们想从map.vue页面通过@click="Mmap"的button按钮跳转到Mapmap.vue并把经纬度传过去。

map页面的路径：D:\project\RuoYi-Vue\ruoyi-ui\src\views\booksys\Maps\map.vue

Mapmap也页面的路径：D:\project\RuoYi-Vue\ruoyi-ui\src\views\booksys\Maps\Mapmap.vue

一、先设置路由

先找到syc下router的index页面，我的路径D:\project\RuoYi-Vue\ruoyi-ui\src\router\index.js写自己跳转逻辑的路由。

// 定义一个路由配置对象
{
  // 路由的路径
  path: '/booksys/Maps', 
  // 布局组件
  component: Layout, 
  // 表示该路由在菜单中是否隐藏
  hidden: true, 
  // 子路由配置数组
  children: [
    {
      // 子路由的具体路径
      path: 'map', 
      // 懒加载对应的组件
      component: () => import('@/views/booksys/Maps/Mapmap'), 
      // 路由的名称
      name: 'Maplog', 
      // 路由的元数据，包含路由的标题信息
      meta: { title: '地图测试' }
    }
  ]
}

 这个逻辑一开始我不太懂，我看到这篇文章，就是说定义了一个路由/booksys/Maps/map，当用户访问这个路由就会加载到/booksys/Maps/Mapmap这个页面（如果理解错了，欢迎指正）。

 二、在原页面（map.vue）添加跳转逻辑

在原页面（map.vue）添加一个button按钮用于调用页面跳转逻辑

  <div>
      <button @click="Mmap">跳转按钮</button>
  </div>

如果不理解为什么要在map.vue页面写的path还是map，你可以理解为这个path就是路由中定义的用户可以点击的链接名字（我这么理解的），比如 www.google.com 你点一下看看喽~

// 定义一个名为 Mmap 的方法
Mmap() {
  // 如果 startLocation 有值
  if (this.startLocation) {
    // 使用 Vue Router 的 $router.push 方法进行路由跳转
    this.$router.push({
      // 要跳转的路由路径
      path: '/booksys/Maps/map',
      // 携带的查询参数
      query: {
        // 起始位置的经度
        longitude: this.startLocation[0],  
        // 起始位置的纬度
        latitude: this.startLocation[1]  
      }
    });
    // 在控制台打印传值的信息
    console.log(`传值：经度 ${this.startLocation[0]}, 纬度 ${this.startLocation[1]}`);
  } else {
    // 如果 startLocation 没有值，打印错误信息
    console.error('尚未获取到有效的起始位置，无法进行路由跳转');
  }
}

 三、在目标页面（Mapmap.vue）添加接收逻辑

// 创建钩子函数，在组件实例创建时调用
created() {
  // 获取当前路由的查询参数
  const query = this.$route.query;
  // 如果查询参数中同时存在 longitude（经度）和 latitude（纬度）
  if (query.longitude && query.latitude) {
    // 将查询参数中的经度赋值给组件的 startLng 属性
    this.startLng = query.longitude;
    // 将查询参数中的纬度赋值给组件的 startLat 属性
    this.startLat = query.latitude;
    // 打印接收到的起点经纬度信息
    console.log(`接收到的起点经度: ${this.startLng}, 纬度: ${this.startLat}`);
    // 调用 reloadMap 方法
    this.reloadMap(); 
  }
},

注：可以用console.log在控制台多打印输出一些数值，以便于排查错误。

参考

大家可以多参考一下各位大佬的讲解。

若依框架中的页面跳转

若依如何进行页面路由跳转，路由跳转时如何携带参数（超详细图文教程）

若依Ruoyi实现二级跳转