vue 之路由跳转有:
1、 this.$router.push进行编程式路由跳转
2、 router-link 进行页面按钮式路由跳转
vue 之路由传参有:
1、 this.$route.params获取路由传递参数
2、this.$route.query获取路由传递参数
区别: params 和 query 都是传递参数的,params不会在url上面出现,并且params参数是路由的一部分,是一定要存在的 query则是我们通常看到的url后面的跟在?后面的显示参数
vue 之路由跳转及传参示例:
一.使用router-link进行路由导航,传递参数:
父组件:
子组件中:使用this.$route.params.num来接收路由参数
![](https://upload-images.jianshu.io/upload_images/11772816-402599761ea1365a.png?imageMogr2/auto-orient/strip|imageView2/2/w/609/format/webp)
路由配置文件中:在路径绑定num参数
![](https://upload-images.jianshu.io/upload_images/11772816-4e3b2c59a4cbaf4c.png?imageMogr2/auto-orient/strip|imageView2/2/w/981/format/webp)
地址栏中:
二、直接调用$router.push 实现携带参数的跳转:
父组件中:模板渲染中调用函数,传递参数
![](http://upload-images.jianshu.io/upload_images/11772816-1c4bdb04f959771f.png?imageMogr2/auto-orient/strip|imageView2/2/w/994/format/webp)
子组件中:使用 this.$route.params.id 获取参数
![](http://upload-images.jianshu.io/upload_images/11772816-9478815e02cb19a5.png?imageMogr2/auto-orient/strip|imageView2/2/w/969/format/webp)
路由配置文件中:id用来为参数占位
![](http://upload-images.jianshu.io/upload_images/11772816-d16f43d32c2b3427.png?imageMogr2/auto-orient/strip|imageView2/2/w/863/format/webp)
地址栏中:
![](https://img2018.cnblogs.com/common/1712086/201912/1712086-20191226110335295-2086101774.png)
三、通过路由属性中的name来确定匹配的路由,通过params来传递参数:使用name来匹配路由
子组件中:依然使用 this.$route.params.id 接收参数
![](http://upload-images.jianshu.io/upload_images/11772816-64ae86eb188524c1.png?imageMogr2/auto-orient/strip|imageView2/2/w/691/format/webp)
路由配置文件中: 使用name配置
![](http://upload-images.jianshu.io/upload_images/11772816-91c905e8582b0a8d.png?imageMogr2/auto-orient/strip|imageView2/2/w/734/format/webp)
地址栏中:不显示参数
![](https://img2018.cnblogs.com/i-beta/1712086/201912/1712086-20191226110938741-229664619.png)
四、使用path来匹配路由,然后通过query来传递参数,这种情况下 query传递的参数会显示在url后面?id=?
父组件中:使用query来传递参数
![](http://upload-images.jianshu.io/upload_images/11772816-ab0e9fd9b1751608.png?imageMogr2/auto-orient/strip|imageView2/2/w/906/format/webp)
子组件中:使用 this.$route.query.id来接收参数
![](http://upload-images.jianshu.io/upload_images/11772816-5bbb529eff1d8c92.png?imageMogr2/auto-orient/strip|imageView2/2/w/646/format/webp)
路由配置文件中:
![](http://upload-images.jianshu.io/upload_images/11772816-c60e6fab9b8b0271.png?imageMogr2/auto-orient/strip|imageView2/2/w/838/format/webp)
地址栏中:
![](https://img2018.cnblogs.com/i-beta/1712086/201912/1712086-20191226111105930-284764220.png)