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);
});