Vue路由传参query和params两种方式
Vue路由传参query和params两种方式
·
1、query传参
<router-link to="/page1?name='张三'">query</router-link>
直接在path后面加 ?参数,页面跳转的时候 参数会传过去
也可以换个写法:
<input @click="goQuery()" type="button" value="query"> goQuery(){ this.$router.push({ path:'/page1', query:{name:'张三'} }) },
通过this.$router.push做路由跳转的话,query请求 使用的是path,url会显示参数,所以是get请求
2、params传参
<router-link to="/page2/'张三'">params</router-link>
//同时在路由配置
{ path: '/page2/:name', name: 'page2', component: page2 },
params传参 是在/后面直接加参数传参,/page2/'张三' 这样的url会直接映射到对应的路由,来达到传参的效果
也可以换个写法 :
<input @click="goParams()" type="button" value="params">goParams(){ this.$router.push({ name:'page2', params:{name:'张三2'} }) }
通过this.$router.push做路由跳转的话,params使用的是name,并且url不会显示参数,所以是post请求
更多推荐
已为社区贡献2条内容
所有评论(0)