mars3dApp开发——如何使用路由传参

---

前言

mars3d App首页搜索模块遇到了有关路由传参的一些问题在此记录一下。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、使用场景

1、搜索页输入关键词，点击搜索到搜索结果页面
2、搜索结果页面，点击“附近”到附近数据列表页面，
3、点击 要在目标点附近搜索的类型（美食，加油站等等），显示搜索结果。
在上述场景中使用到了router.push()、router.replace()进行路由传参。

二、router.push()和router.replace()

1.router.replace()

在场景1中，我门只需要根据输入的关键词查询出结果，选择查询出的地点时，需要将该目标点的一些数据传递到查询结果页面显示出来，但是在查询结果页面点击返回时不需要将原生数据保留，所以我们使用router.replace()

router.replace()本质是替换路由，没有历史记录，点击返回，会跳转到上上一个页面

使用GaodePOI查询出结果代码如下

const queryGaodePOI = new mars3d.query.GaodePOI({
    // key: ['ae29a37307840c7ae4a785ac905927e0'],
  })

// 查询
export function search(keyWords: string) {
  queryGaodePOI.query({
    count: 10, // count 每页数量
    text: keyWords, //关键字
    success: function (res) {
      console.log(res)
    },
    error: function (msg) {
      console.log(msg)
    }
  })
}

search-home.vue传递参数：

 router.replace({
    name: "search-result",
    query: {
      point: JSON.stringify({ 
      key: key,
      name: name, 
      address: address, 
      type: type,
      postions: postions,
      photos: photosUrl 
       })
    }
  })

search-result 接收参数

const point = reactive(JSON.parse(route.query.point as string))

2.router.push()

在搜索页面需要查看该目标点周围的一些目标，点击返回时，查询结果的页面显示的数据不能丢失，所以这这个时候就使用router.push()
router.push()本质是向history栈中添加一个路由，在我们看来是切换路由，但本质是在添加一个history记录

代码如下（示例）：

  router.push({
  name: "nearby", 
  query: 
  { name: point.name, postions: point.postions } 
  })

三、使用VueRouter之query与params两种传参区别

1.首先就是写法得不同，query 得写法是 用 path 来编写传参地址，而 params 得写法是用 name 来编写传参地址，你可以看一下编写路由时候得相关属性，你也可以输出一下 路由对象信息 看一下

2.接收方法不同， 一个用 query 来接收， 一个用 params 接收 ，总结就是谁发得 谁去接收

3.query 在刷新页面得时候参数不会消失，而 params 刷新页面得时候会参数消失，可以考虑本地存储解决

4.query 传得参数都是显示在url 地址栏当中，而 params 传参不会显示在地址栏