vue3 路由传参方式(query、state)

一、query传参，参数显示在链接后面

原页面使用 push 跳转，用 query 传递参数

const router = useRouter()
router.push({ path: '/test-link/index', query: { name: 'zhangsan'} })

跳转页面通过 route.query 接收传递的参数

const route = new useRoute()
const query = route.query

onMounted(() => {
	console.log(query.name)
})

二、state传参，参数不显示在链接后面

原页面使用 push 跳转，用 state 传递参数。
当使用router.push进行传递复杂数据类型时，如果有字段的属性为Date对象，那么将会转换成字符串，这样就不能在route.query中获取到正确的日期对象，可能会出现乱码。

使用以下方式解决此问题：
1、在传递数据前使用 JSON.stringfy(data) 转换成 JSON 格式
2、注意：push 中的配置项 query 或者 params 接受的是一个对象，所以需要定义一个字段来存储 JSON 数据。
3、在获取数据时需要使用 JSON.parse(history.state.params) 获取数据。

const router = useRouter()

function toQuestionnaire() {
	const data = {
    	name: 'zhangsan',
    	date: '2024-01-01'
    }
    let params = JSON.stringify(data)
	router.push({ path: '/test-link/index', state: { params } })

跳转页面通过 history 接收传递的参数

onMounted(() => {
    const params = JSON.parse(history.state.params)
})