vue3路由跳转传参方式

vue3路由跳转传参方式

1.文章写作背景

写这篇文章的起因，是因为一个bug。
我在vue3中使用router的push方法跳转页面，并在params中传入参数后，
发现在跳转后的页面无法获取到params的参数。

2.bug原因分析

// bug代码
import {useRouter} from "vue-router";

const router = useRouter();
 router.push({
    name:'linked1',
    params:{
      id:'666',
      age:23
    }
  })

在跳转后的页面F12，打开浏览器控制台后，发现vue-router有个warning。Discarded invalid param(s) “id”, “age” when navigating。翻译过来就是导航时丢弃了无效参数“id”、“age”。

这下为什么在页面跳转后，获取不到params传递参数的原因就很清晰了，原来是直接被vue-router给丢弃了。

不过这又引出了一个新问题。那就是vue-router为啥要把我好端端传递的参数给丢掉嘞？咱们这次看图说话。

请看图片:

上面是vue-router4的一次更新日志，讲的很清楚。咱们直接抓重点params传递的参数，在页面刷新后会丢失参数。

因为vue2项目一般是使用vue-router3的，所以页面跳转时用params传递参数，是支持的。
所以相信写过vue2的小伙伴们，如果有过页面跳转用params传参经历的都能理解这句话背后的血和泪。
真是个巨坑，而且这么设置贼反人类，我都跳转页面了，而且参数都传过去了。你告诉我，不能让用户刷新页面，否则会丢失，那我为啥不用状态管理工具，或者直接持久化到浏览器缓存里呢？所以说对于vue-router4的这次更新，我是举双手赞成的。

3.问题解决

想要解决这个params传参丢失这个bug，有如下几种方法

1.使用query传参（推荐，暴露传参）
先简述一下query和params传参的区别吧。
params
params是隐蔽的传参，参数在内存中，不暴露到浏览器路径中。
query
query是暴露的传参，将参数以?的形式，拼接到跳转后的路径上。

// 跳转页面
import {useRouter} from "vue-router";

const router = useRouter();
 router.push({
    name:'linked1',
    query:{
      id:'666',
      age:23
    }
  })

// 接收页面
import {useRoute} from "vue-router";

const route = useRoute();
const query = route.query;

跳转后页面及参数

2.params+动态路由匹配（推荐，暴露传参）
如果你在跳转页面时，所要传递的参数较少，则可直接在路由中声明要传递的参数，然后在配合params使用。

这时你就会惊奇的发现，控制台中那个warning神奇的消失了，而且参数也拼到路径上传递过去了。

注意：由于此时参数名称与个数在路由中已经声明过了，所以在配合使用params传参时。一定不能传错名字，或者多传和少传参数。因为少传和传错名称，浏览器控制台会报少必填参数的错误，跳转不过去。而多传则会被舍弃，传递不到跳转后的页面上。
动态路由设置：

// 跳转页面
import {useRouter} from "vue-router";

const router = useRouter();
 router.push({
    name:'linked2',
    params:{
      id:'666',
      age:23
    }
  })

// 接收页面
import {useRoute} from "vue-router";

const route = useRoute();
const query = route.params;

3.使用historyAPI，传递时用state（不推荐，隐蔽传参）
注意：state内要跟传递的对象。此时接收不需要route，直接使用history.state即可

//  跳转页面
import {useRouter} from "vue-router";

const router = useRouter();
  router.push({
    name: 'linked1',
    state: {
      params: {
        id: '666',
        age:
            23
      }
    }
  })

//  接收页面
const historyParams = history.state.params

3.结语

我先简述一下我为啥推荐暴露传参而不推荐隐蔽传参。
首先，虽然history API能解决刷新页面丢失数据的情况，但仅限于当前tab页，因为参数是保存到当前tab页的history中。所以会有一个神奇的现象，那就是你复制了当前的url，想打开一个新tab页，然后发现没有参数了。
其次，也算是我的一个疑问，希望能蹲到一个大佬为我指点一下迷津。
我一直不理解前端跳转页面，为啥传个参数还要遮遮掩掩的，感觉也就传个id啥的就够了，其他信息直接到新页面拉接口获取不就行了，也不涉及什么敏感信息的。
而且隐蔽传参最大的一个bug就是，打开同一个url，如果你不是从前置页面跳转过来的，那么就获取不到参数，页面渲染页不一致，感觉这是个巨坑。所以我就很不理解，也更不推荐隐蔽传参。
不过也大概率是我才疏学浅。希望能有个大佬为我讲解一下，有啥必须在跳转页面时，使用隐蔽传参的场景，我好学习一下，以解心中迷惑，希望大家不吝赐教，多多在评论区讨论，感谢了~~