vue3.0路由跳转传参(setup语法糖写法)
vue3.0路由传参
·
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))//数组,对象转回来
})
更多推荐
已为社区贡献8条内容
所有评论(0)