Vue3.0路由跳转携带参数方法是什么

这篇“vue3.0路由跳转携带参数方法是什么”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue3.0路由跳转携带参数方法是什么”文章吧。

一、路由跳转

1、在需要跳转的页面

//引入api---useRouterimport { useRouter } from 'vue-router'......//定义router变量const router =useRouter()const methodClick=(data)=>{let paramValue=data.deviceCode//路由跳转，携带参数router.push('/equipment/operation?deviceCode='+paramValue)用router.push跳转页面：例：// 字符串router.push('home')// 对象router.push({ path: 'home' })// 命名的路由router.push({ name: 'user', params: { userId: '123' }})// 带查询参数，变成 /reGISter?userId=123router.push({ path: 'register', query: { userId: '123' }})

2、如果有参数的话，在接收页面引入API–useRoute

import { useRoute } from 'vue-router'......//在接收页面定义变量route，获取传过来的变量const route = useRouter()onMounted(() => {if (route.currentRoute.value.query.deviceCode) {state.codeDevice2 = route.currentRoute.value.query.deviceCode}})例：//首先在setup中定义const route = useRoute()//querylet userId=route.query.userId;//paramslet userId=route.params.userId;

二、页面传参需要注意的问题

如果提供了 path，params 会被忽略，但query 没有这种情况，此时需要提供路由的 name 或手写完整的带有参数的 path

const userId = '123'router.push({ name: 'user', params: { userId }}) // -> /user/123router.push({ path: `/user/${userId}` }) // -> /user/123// 这里的 params 不生效router.push({ path: '/user', params: { userId }}) // -> /user

上述规则同样适用于 router-link 组件的 to 属性
3、如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2)，你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息)

以上就是关于“Vue3.0路由跳转携带参数方法是什么”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。