vue3+ts 页面跳转传对象

山海入梦

已于 2022-06-05 18:01:57 修改

阅读量3.6k

点赞数 3

文章标签： vue.js typescript

于 2022-04-04 19:01:54 首次发布

本文链接：https://blog.csdn.net/demoren/article/details/123957919

版权

问题描述:

进最近在使用vue3+ts+vite做了一个小项目,页面跳转需要传对象然而我就跟往常使用vue2和js的用法传参然后出现了问题

这里是页面a传参

然后页面b进行接受参数的时候报错了

原因可能是因为传参的类型跟接受参数的类型不符,因为使用ts所以对属性的类型有严格的规范所以解决方法如下

页面A跳转页面B

页面A:

//BlueContentDto是已经定义好接收数据的接口

const item:BlueContentDto =  {
        id: "1",
        name: "工作经验",
      }

const data = JSON.stringify(item)
router.push({
       path: '页面B路径',
       query: {
           conObj:encodeURIComponent(data )
       }
})

页面B:

interface RouteQuery extends LocationQuery {
  conObj: string;
}

const contentInfo = ref({} as BlueContentDto);
const routeQuery = route.query as RouteQuery;

if (route.query.conObj) {
  const str: string = decodeURIComponent(routeQuery.conObj);
  contentInfo.value = JSON.parse(str);
  console.log("接收参数", contentInfo.value);
}

声明一个RouteQuery接口并继承 LocationQuery 然后在声明一个接受类型就成功接收到传的对象