最近空闲一段时间，就没事看了看vue-router的一些知识，想起了之前做项目遇到的一些不解，也就是当初刚入门，文档看的不详细，理解的不全面导致的。现在虽然不怎么会犯这样的错误了，但是还是写下来，记录一下，也方便有需要的朋友查阅，共勉吧。如果能帮到你，那就更好了...
/data/:id这个路由匹配/data/1,/data/2这里的 id 叫 params
/data?id=1 /data?id=2 这里的 id 叫 query
当你使用params方法传参的时候，要在路由后面加参数名，并且传参的时候，参数名要跟路由后面设置的参数名对应。使用query方法，就没有这种限制，直接在跳转里面用就可以。
这句话怎么理解呢？看下边：
如果你要使用params传参，那么你的路由页面index.js必须带上参数，如下
{ path: '/detail/:id/', name: "detail", component: detail//这个details是传进来的组件名称 } 使用： 方法1：<router-link :to="{ name: 'details', params: { id: 123 }}">点击按钮</router-link> 方法2：this.$router.push({name:'details',params:{id:123}}) 页面url显示结果是：http://localhost:8081/#/details/123
如果你要使用query传参，那么你的路由页面index.js必须带上参数，如下
{ path: '/detail',//这里不需要参入参数，参见上面的params写法 name: "detail", component: detail//这个details是传进来的组件名称 } 使用： 方法1：<router-link :to="{ name: 'details', query: { id: 123 }}">点击按钮</router-link> 方法2：this.$router.push({name:'details',query:{id:123}}) 方法3：<router-link :to="{ path: 'details', query: { id: 123 }}">点击按钮</router-link> 方法4：this.$router.push({path:'details',query:{id:123}}) 页面url显示结果是：http://localhost:8081/#/details?id=123
这里看方法3,4,其实是对应方法1,2的，也就是说使用query方法，可以与path和name共用，2个都可以，但是params只能对应name。
要是想获取参数值：各自的获取方法是：
query和params分别是：this.$route.query.id，this.$route.params.id
顺便说一些参数是多个的情况
params传参，如果路由index.js如下：
{ path: '/detail/:id/:name', name: "detail", component: detail//这个details是传进来的组件名称 }
那么跳转写法：this.$router.push({name:'detail',params:{id:123,name:'lisi'}})
效果：http://localhost:8081/#/details/123/lisi
query的写法参考上面。
query跟params，前者在浏览器地址栏中显示参数，后者则不显示。
