vue路由传参及解决vue路由传参页面刷新参数丢失问题

Vue中给我们提供了三种路由传参方式，下面我们一个一个的来看一下：
注意：

• 获取参数的时候是route，跳转和传参的时候是$router；
• 以下方法均不建议用来传obj,若一定要传，请先用JSON.stringify(obj)方法转换;

方法一：params传参：

//这个组件对应的路由配置
{
　　//组件路径
    path: '/admin',
　　//组件别名
    name: 'admin',
　　//组件名
    component: Admin,
}

// 传参
this.$router.push({
        name:"admin",
　　　　//这里的params是一个对象，id是属性名，item.id是值(可以从当前组件或者Vue实例上直接取)
        params:{id:item.id}
})   

// 接收参数    
this.$route.params.id

以上传参方式基本上可以理解为ajax中的post请求方式，参数都是不可见的，但是该方法有一个弊端，就是当页面刷新后参数值会丢失！！！

方法二：路由属性配置传参：

//这个组件对应的路由配置
{
　　//组件路径
    path: '/admin/:id',
　　//组件别名
    name: 'admin',
　　//组件名
    component: Admin,
}

// 传参
this.$router.push({
        name:"admin",
        params:{id:item.id}
})       

// 接收
this.$route.params.id

方法三：query传参

//这个组件对应的路由配置
{
　　//组件路径
    path: '/admin',
　　//组件别名
    name: 'admin',
　　//组件名
    component: Admin,
}
//  传参
this.$router.push({
        name:"/admin",
　　    query:{id：item.id}
})    

// 接收
this.$route.query.id   

以上两种方式是可以解决页面刷新参数消失问题的，query这种方式可以理解为是ajax中的get方法，参数是直接在url后面添加的，参数是可见的。