vue3+ts 页面跳转传对象
进最近在使用vue3+ts+vite做了一个小项目,页面跳转需要传对象然而我就跟往常使用vue2和js的用法传参然后出现了问题何去解决
·
问题描述:
进最近在使用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 然后在声明一个接受类型就成功接收到传的对象
更多推荐
已为社区贡献4条内容
所有评论(0)