vue3.0路由跳转传参(setup语法糖写法)

A页面

<!-- 定义一个按钮 -->
<el-button type="primary" size="small" :icon="DocumentChecked" @click="handleDetail">提 交</el-button>

<script setup>
import { ref } from 'vue'
//引入路由
import { useRouter } from 'vue-router'
//element plus图标引入
import { DocumentChecked } from '@element-plus/icons-vue'

//定义路由
const router = useRouter()

//定义要传递的参数
const name ref('阿凡')
const demoArray = ref(['A','B','C'])

//提交按钮
//这是query传参，params传参需要添加name
function handleDetail(){
	router.push({
		path:'/B.vue', //B页面的路径
		query:{
			name:name.value,
			demoArray:JSON.stringify(demoArray.value)//传递对象数组，需要先转成字符串，值传过去在转回来
		}
	})
}
</script>

B页面

//引入周期函数
import { onMounted } from 'vue'
//引入路由
import { useRoute } from 'vue-router'

//定义路由
const route = useRoute()

//周期函数，获取A页面传递的数据
onMounted(async () => {
	console.log(route.query.name,'A页面传递的数据')
	console.log(JSON.parse(route.query.demoArray))//数组，对象转回来
})