Vue 路由跳转时携带参数怎么写？（持续完善中...）

Vue前端中由A页面跳转至B页面，需要携带参数，应该怎么样实现呢？

一、参数为id

A页面：

// 点击跳转链接，并携带id至B页面
const toViewNewsDetail = (value) => {const path = '/newsPublish/newsDetail';router.push({ path: path, query: { id: value.id } });
};

B页面的接收，可写在mounted中

onMounted(() => {conlose.log(router.query.newsId);});

需要注意的是，以上两个页面的router需要提前引入。

二、参数为对象

A页面：

此处的value为对象的形式，当路由router传递参数时仅可接受字符串的形式，故先进行对象到字符串的转换

// 以下示例value的数据形式--对象形式
{id:'1',name:'xiaoming',age:'18'
}// 点击跳转链接，并携带对象形式的value至B页面
const toViewNewsDetail = (value) => {const path = '/newsPublish/newsDetail';const objectAsQueryString = JSON.stringify(value);router.push({ path: path, query: { params: objectAsQueryString } });};

B页面：

可写在mounted中，由于传递的是字符串的形式，当我们通过路由router接收值后可将字符串的值转换为对象形式

onMounted(() => {const objectAsString = router.query.params; // 从查询参数中获取 JSON 字符串const myObject = objectAsString ? JSON.parse(objectAsString) : null; // 将 JSON 字符串解析回对象newDetailObj.value = myObject; // 路由携带的参数值传递给console.log('详情页', myObject);
});