vue路由跳转、传参和接收参数、query和params
文章目录一、路由跳转:1、router-link to属性设置跳转信息to可以直接设置一个字符串,表示跳转的url地址to可跟一个json对象2、编程式路由跳转二、路由传参使用query传参:使用params传参:query传参和params传参区别:三、参数的接收由query传参接收时:由params传参接收时:一、路由跳转:1、router-link to属性设置跳转信息标签代替超链接使用to
·
文章目录
一、路由跳转:
1、router-link to属性设置跳转信息
to可以直接设置一个字符串,表示跳转的url地址
<router-link to="/showUsers"></router-link>
<router-link :to="'/updateUser?id='+user.id">修改</router-link>
to可跟一个json对象
<router-link v-bind:to="{path:'/user',query:{name:'王华华',age:20}">用户管理</router-link>
说明:
to前面加上 v-bind: ,to里可以写入变量,否则只能写入字符,v-bind可以省略,只留 :to
2、编程式路由跳转
$router.push()
使用举例:
//使用query传参
this.$router.push({path:'/home',query: {id:'1'}})
this.$router.push({name:'home',query: {id:'1'}})
//使用params传参
this.$router.push({name:'home',params: {id:'1'}})
二、路由传参
两种传参方式:query、params
使用query传参:
使用params传参:
query传参和params传参区别:
- params传参只能使用name,不可使用path;
- query传参即可以使用name,也可以使用path
- params传参数 ,类似post, 跳转之后页面 浏览器地址栏url后面不会拼接参数 , 但是刷新页面 id 会消失
- query传参数 ,类似get,跳转之后页面 浏览器地址栏后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类要使用params
三、参数的接收
由query传参接收时:
//query传递参数(查询id为1的user)
<router-link to="{path:"/UserComponent",params:{id:1}}">查询</router-link>
//query接收参数
userId=this.$router.query.id //接受query里的参数赋值给userId
由params传参接收时:
//params传递参数(查询id为1的user)
<router-link to="{name:"UserComponent",params:{id:1}}">查询</router-link>
//params接收参数
userId=this.$router.params.id //接受query里的参数赋值给userId代码片
student={id:1.name:"wj"};
//传递参数student
<router-link to="{name:"UserComponent",params:student">查询</router-link>
//接受参数student
student2=this.$router.params
更多推荐
已为社区贡献2条内容
所有评论(0)