vue3+tsx 获取路由参数和跳转踩坑

目录

路由跳转问题

获取路由参数

---

在使用过程中的一些问题，相信大家也会遇到。

路由跳转问题

大家在搜索答案过程中，好多是使用vue-router中的useRoute和useRouter两个hook，但是在tsx中使用会存在一些问题，如果在setup函数中使用是没有问题的，但是在ts文件中，比如封装的请求工具，请求响应拦截会用到跳转，这是就会出现一个问题。如图

 那我们如何跳转呢？可以使用import router from ' @/router'。

获取路由参数

获取路由参数也会遇到如上问题，如果遇到可以使用我如下方法解决。

export default function history() {
  const search: string = location.search;
  const urlSearchParams = new URLSearchParams(search);
  const query: any = {};
  [...urlSearchParams.entries()].forEach((item) => {
    query[item[0]] = item[1];
  });
  console.log(query);

  return query;
}

这里的return返回的是一个类似query的路由参数对象。