vue3路由跳转传参

首先声明: 

const route = useRoute()

const router = useRouter()

1、不传值:

router.push('/路由路径')

router.push({ path: '/跳转的路由路径' })

router.push({ name:'/跳转的路由名称'})

2、传参:

router.push(`/路由路径/${参数}`) 

router.push('/路由路径/' + 参数)

router.push({ path: '/路由路径', query: { paramValue1: 参数1, paramValue2: 参数2,} })

router.push({ path: '/路由路径', query: { 参数1,参数2 } })

3、传对象

router.push({ path: '路由路径', query: { paramValue: encodeURIComponent(JSON.stringify(对象参数)) }, //加密传输对象})

接收路由传参页面:

onBeforeMount(() => {
  const paramData = route.query.paramValue
  tableData.value = JSON.parse(
    decodeURIComponent(typeof paramData === 'string' ? paramData : '')//对象解密
  )
})

你可能感兴趣的:(vue.js,前端,typescript)