Vue是一个单页面应用，必然要使用router，所以对使用Vue-router过程中遇到的问题和经验进行一个总结。

Vue路由跳转的传值方式：（params和query）

路由跳转，要用到两个路由全局变量,一个是$router (路由器对象，是路由的容器，主要管理路由页面跳转问题),一个是$route(路由对象，代表了当前展示页面的路由信息，主要是获取当前页面需要获取的信息)

1.params方式：

因为params是路由的一部分,必须要在路由后面添加参数名，所以在使用params方式传值的时候必须在路径path后面，设置接受数据的参数，否则刷新页面后传递的数据就会丢失。且在this.$router.push的时候，以name的方式进行路径跳转。

• /router/index.js:

...
{
    path: "/one/:id", 
    name: "one",
    component: () => import("@/views/one.vue"),
 },
 ...

• index.vue

this.$router.push({
    name:"one",
    params:{
      id:item.id,
    }
})

• one.vue

console.log(this.$route.params.id)

2.query方式:

query方式传递参数，较为常用随意与get请求比较相似，无需对路由路径进行什么改动，传递的参数会添加到路由后面。在this.$router.push的时候，以path的方式进行路径跳转即可，貌似也可以使用name的方式跳转，但是我没有试过，只要能成功跳转并传递参数，什么方式并没有区别。但是query传递的参数信息会以明文的方式添加在url路径后面，所以建议尽量使用params来传值。

• /router/index.js:

...
{
    path: "/two",
    name: "two",
    component: () => import("@/views/two.vue"),
 },
 ...

• index.vue

this.$router.push({
   path: "/two",
   query: {
     id:item.id,
   },
});

• two.vue

console.log(this.$route.query.id);