这篇“Vue3.0路由跳转携带参数方法是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue3.0路由跳转携带参数方法是什么”文章吧。
一、路由跳转
1、在需要跳转的页面
//引入API---useRouter import { 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=123 router.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() //query let userId=route.query.userId; //params let userId=route.params.userId;
二、页面传参需要注意的问题
1、如果提供了 path,params 会被忽略,但query 没有这种情况,此时需要提供路由的 name 或手写完整的带有参数的 path
const userId = '123' router.push({ name: 'user', params: { userId }}) // -> /user/123 router.push({ path: `/user/${userId}` }) // -> /user/123 // 这里的 params 不生效 router.push({ path: '/user', params: { userId }}) // -> /user
2、上述规则同样适用于 router-link 组件的 to 属性
3、如果目的地和当前路由相同,只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2),你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息)