vue-router路由传参
Hello!大家早上好呀 今天给大家分享一下vue-router路由传参的方法,要使用router-link跳转的前提必须要使用router-view以后使用router-link才可以生效,但是你不写router-view也是可以路由跳转的只不过是换一种写法而已。
this.$router.push( { path : ' /to '} );
第一种传参方法
然后咱们在HelloWorld这个组件里面跳转到Header在Header组件中接收这个color的参数,HelloWorld组件写法
没点击调转之前咱们先看下URL地址
然后咱们点击跳转按钮按理来说可以跳转到Header组件,我在Header中写了一句话:
然后现实往往和咱们想的有点不一样甚至有点惊喜哈哈,看图↓
虽然跳转到了Header路由为什么咱们写的字没有显示呢?这是怎么回事呢?这时候咱们要在URL地址后面写一个参数因为上面咱们在路由那里规定了一个参数,在这里咱们输入参数才能看到路由的内容。
接收参数咱们简单明了
this.$route.params //接收参数
第一种方法总结:路由规定参数 /header/:color //color是一会咱们要传的参数
接收参数:this.$route.params //接收参数
第二种传参方法
<router-link :to="{ path : '/Header',query:{type : 'get'} }">点击跳转</router-link>
使用query的方法传参使用key,value的方法传参。
看下点击调转以后URL地址的变化(这样看起来大家是不是很熟悉了呢?):
接收参数:
Header组件接收:
this.$route.query //接收参数
第二种方法总结:
使用query:{ type : 'number'} 来传参
接收参数:this.$route.query 接收参数
总结vue-router路由传参
1: /Header/:color //传参 this.$route.params //接收参数
2: query : { type : 'String' } //传参 this.$route.query //接收参数
github地址: https://github.com/Liingot/vueRouter-demo
今天就到这里谢谢大家 溜了溜了溜了 !!!