一、使用router-link进行路由导航,传递参数
=> 父组件中:使用<router-link to="/需要跳转的路由路径/需要传递的参数"></router-link>标签进行导航
![](http://upload-images.jianshu.io/upload_images/11772816-da1be1aa543f329f.png?imageMogr2/auto-orient/strip|imageView2/2/w/720/format/webp)
child是子页面路由路径,123是需要传递的参数
=>子组件中:使用this.$route.params.num来接收路由参数
![](http://upload-images.jianshu.io/upload_images/11772816-402599761ea1365a.png?imageMogr2/auto-orient/strip|imageView2/2/w/609/format/webp)
此时,页面上渲染出路由传递过来的参数num,呈现123
=>路由配置文件中:
![](http://upload-images.jianshu.io/upload_images/11772816-4e3b2c59a4cbaf4c.png?imageMogr2/auto-orient/strip|imageView2/2/w/981/format/webp)
num用来为参数占位
=>地址栏中:
![](http://upload-images.jianshu.io/upload_images/11772816-0dd3c169b1d80ebd.png?imageMogr2/auto-orient/strip|imageView2/2/w/817/format/webp)
在地址栏中显示传递的参数num,即123, ,刷新页面,参数不丢失
二、直接调用$router.push 实现携带参数的跳转
=> 父组件中:
![](http://upload-images.jianshu.io/upload_images/11772816-1c4bdb04f959771f.png?imageMogr2/auto-orient/strip|imageView2/2/w/994/format/webp)
模板渲染中调用函数,传递参数
=> 子组件中:
![](http://upload-images.jianshu.io/upload_images/11772816-9478815e02cb19a5.png?imageMogr2/auto-orient/strip|imageView2/2/w/969/format/webp)
仍然使用 this.$route.params.id 获取参数
=> 路由配置文件中:
![](http://upload-images.jianshu.io/upload_images/11772816-d16f43d32c2b3427.png?imageMogr2/auto-orient/strip|imageView2/2/w/863/format/webp)
id用来为参数占位
=> 地址栏中:
![](http://upload-images.jianshu.io/upload_images/11772816-b15526398deb25fa.png?imageMogr2/auto-orient/strip|imageView2/2/w/549/format/webp)
在地址栏中显示传递的参数id, ,刷新页面,参数不丢失
三、通过路由属性中的name来确定匹配的路由,通过params来传递参数
=> 父组件中:
![](http://upload-images.jianshu.io/upload_images/11772816-4a8cd82cbb4fca28.png?imageMogr2/auto-orient/strip|imageView2/2/w/995/format/webp)
使用name来匹配路由
=> 子组件中:
![](http://upload-images.jianshu.io/upload_images/11772816-64ae86eb188524c1.png?imageMogr2/auto-orient/strip|imageView2/2/w/691/format/webp)
依然使用 this.$route.params.id 接收参数
=> 路由配置问件中:
![](http://upload-images.jianshu.io/upload_images/11772816-91c905e8582b0a8d.png?imageMogr2/auto-orient/strip|imageView2/2/w/734/format/webp)
使用name匹配
=> 地址栏中:
![](http://upload-images.jianshu.io/upload_images/11772816-80f07e8eb41fd192.png?imageMogr2/auto-orient/strip|imageView2/2/w/576/format/webp)
地址栏中不显示参数,刷新页面,参数丢失
四、使用path来匹配路由,然后通过query来传递参数,这种情况下 query传递的参数会显示在url后面?id=?
=> 父组件中:
![](http://upload-images.jianshu.io/upload_images/11772816-ab0e9fd9b1751608.png?imageMogr2/auto-orient/strip|imageView2/2/w/906/format/webp)
使用query来传递参数
=> 子组件中:
![](http://upload-images.jianshu.io/upload_images/11772816-5bbb529eff1d8c92.png?imageMogr2/auto-orient/strip|imageView2/2/w/646/format/webp)
使用 this.$route.query.id来接收参数
=> 路由配置文件中:
![](http://upload-images.jianshu.io/upload_images/11772816-c60e6fab9b8b0271.png?imageMogr2/auto-orient/strip|imageView2/2/w/838/format/webp)
=> 地址栏中:
![](http://upload-images.jianshu.io/upload_images/11772816-f76cd4bb8cf75974.png?imageMogr2/auto-orient/strip|imageView2/2/w/558/format/webp)
参数显示在地址栏中,刷新页面参数不丢失
****这里要特别注意 :在子组件中 获取参数的时候是$route.params 而不是$router ,这很重要~~~
总结:
1、 this.$router.push进行编程式路由跳转
2、 router-link 进行页面按钮式路由跳转
3、 this.$route.params获取路由传递参数
4、this.$route.query获取路由传递参数
5、 params 和 query 都是传递参数的,params不会在url上面出现,并且params参数是路由的一部分,是一定要存在的 query则是我们通常看到的url后面的跟在?后面的显示参数
转自:
作者:Heily99
链接:https://www.jianshu.com/p/5dff306fdb0f