vue项目中页面跳转传参的方法总结

// router.js
{
path: '/target',
component: TargetComponent,
props: true // 启用参数传递
}

// source.vue
<template>
<button @click="navigate">跳转到目标页面</button>
</template>
 
<script>
export default {
methods: {
navigate() {
const param1 = 'Hello';
const param2 = 'World';
this.$router.push({ path: '/target', params: { param1, param2 } });
}
}
}
</script>

// target.vue
<template>
<div>
<p>传递的参数1: {{ $route.params.param1 }}</p>
<p>传递的参数2: {{ $route.params.param2 }}</p>
</div>
</template>

<template>
<div>
<p>{{ message }}</p>
</div>
</template>
 
<script>
export default {
props: ['message']
}
</script>

<template>
<div>
<p>{{ $route.params.id }}</p>
<p>{{ $route.query.name }}</p>
</div>
</template>

<template>
<div>
<button @click="getData">获取数据</button>
</div>
</template>
 
<script>
import axios from 'axios'
 
export default {
methods: {
getData() {
axios.get('/api/data?id=123&name=test')
.then(response => {
console.log(response.data)
})
}
}
}
</script>