Vue3.0路由跳转携带参数的示例详解
短信预约 -IT技能 免费直播动态提醒
一、路由跳转
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 }}) // -> /user2、上述规则同样适用于 router-link 组件的 to 属性
3、如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2)，你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息)
到此这篇关于Vue3.0路由跳转携带参数的文章就介绍到这了,更多相关Vue3.0路由跳转内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
