Vue页面跳转时传参总结
1 路由跳转 <router-link to="/login"> <router-link/> 跳转到 path:'/login' 的页面2 路由跳转时传参 2.1 传参的页面<template>中 : <router-link
1 路由跳转
<router-link to="/login">
<router-link/>
跳转到 path:'/login' 的页面
2 路由跳转时传参
2.1 传参的页面<template>中 : <router-link :to="'/home/newsinfo/' + item.id"> <router-link/>
2.2 参数接收
data() {
return {
id: this.$route.params.id, // 将 URL 地址中传递过来的 Id值,挂载到 data上,方便以后调用
};
}
2.3 router.js内路由的配置
{ path: '/home/newsinfo/:id', component: Newsinfo ,name:'Newsinfo'}
3 编程式页面跳转
this.$router.push({ name:'Home' }) 跳转到name为Home的页面
4 编程式页面跳转时传参
4.1 params 传参 : 相当于post请求,页面跳转时参数不会在地址栏中显示
this.$router.push({
name:'',
params: { id:idParams }
})
接收参数:this.$route.params.id
4.2 query 传参 : 相当于get请求,页面跳转时参数会在地址栏中显示
this.$router.push({
name:'',
query: { id:idParams }
})
接收参数:this.$route.query.id
注意:传参是 router , 接收参数是 route
更多推荐
所有评论(0)