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))//数组,对象转回来
})
Logo

前往低代码交流专区

更多推荐