路由传参的几种方式

组件跳转的时候，下一个组件有的时候会需要前一个页面的一些参数。比如说相同的组件但是要根据不同的角色请求不同的接口等等。有几种路由传递参数的方式：

（1）通过url路径来传递参数(不太知道如何定义类型)

那么通过url路径在浏览器中显示为：http://localhost:8079/#/detail/333
detail是我要跳转的页面/后面333就是我要传递的参数，若是使用这种方式来传递参数的时候，我们需要在路由的文件中来修改一下

// detail后面添加/:id, id代表传过来的参数名为id
{ path: '/detail/:id', name: 'detail', meta: {title: '办事详情'}, component: detail }

在跳转路由的时候有两种方式：

this.$router.push({path: '/detail/333'});    // 在js的方法中

<router-link :to="{path: '/detail/333'}"></router-link>  // 在组件中使用<router-link>标签

那么我们在detail组件中通过以下的方式来获取参数id的值

this.$route.params.id

*注意：路由跳转的时候是router，获取路由参数的时候是route

（2）通过query来传递参数

通过query传递参数的时候，在浏览器显示则为：http://localhost:8079/#/detail?id=333
会拼接在url的问号后面，这种方式不用修改路由的文件，写成：

{ path: '/detail', name: 'detail', meta: {title: '办事详情'}, component: detail },

那么在跳转路由的时候写成：

this.$router.push({path: '/detail', query: {id: 333}});

在获取参数id的时候，写法如下：

this.$route.query.id

（2）通过pararms来传递参数

通过pararms传递参数的时候，在浏览器显示则为：http://localhost:8079/#/detail
也就是说这种传递参数的方式不会在url显示出来。并且这种方式不用修改路由的文件，写法参见方法二

那么在跳转路由的时候写成：

this.$router.push({name: 'detail', params: {id: 333}});
// 注意哦，看着跟方法二很像，差别有两个：
push对象中path改成name，对应跳转组件的name；
第二个参数对象名称为params

在获取参数id的时候，写法如下：

this.$route.params.id

———————美丽的分割线———————
ps：以上都是开始学习vue的时候做的笔记，最近整理到博客上，也发现了其中的一些不足，慢慢完善