vue路由传参的三种方式以及页面刷新参数丢失问题
一、路由传参的三种方式1、传参方式一：params传参2、传参方式二：路由属性配置传参3、传参方式三：query传参二、三种传递方式的区别一、路由传参的三种方式
1、传参方式一：params传参
这种方式页面刷新参数丢失。
（1）、参数传递页面：
// 点击跳转详情页面toDetail(){this.$router.push({name:"AntMemu",//值是在配置路由规则时给路由的命名，相当于别名params:{menu:this.leftMenu}//传递过去的参数})}
（2）、路由规则代码：
{path: '/AntMemu',name: 'AntMemu',//命名路由component: AntMemu,props:true//子组件开启props传参}
（3）、参数获取和使用：
子组件获取通过路由传递过来的参数，这样获取到的参数，相当于data中的数据，参照data数据的使用即可：
props:['menu'],
注意：通过props接受传递的参数前提是在配置路由规则时开启了props传参，为true即为开启，默认false。如果不开启props传参，可以通过下面的方式获取：
menu:this.$route.params.menu//写在data函数中即可
在这里值得一提的是，如果push函数的参数是一个对象形式的话，对象当中如果配置了path属性，那么是不能再配置params属性的，具体可看官方文档 说明：
2、传参方式二：路由属性配置传参
这种方式也是属于params传参，但是存在许多细节，我觉得还是分开来讲比较好，页面刷新参数不丢失。
（1）、参数传递页面代码：
toDetail(){this.$router.push({path:`/AntMemu/${this.id}`,//值是在配置路由规则时给路由的命名，相当于别名})}
（2）、路由配置规则：
{path: '/AntMemu/:id',name: 'AntMemu',//命名路由component: AntMemu,},
这里我用的是ES6的模板字符串方式，可以直接读取参数，也可以使用普通字符串拼接的方式。
（3）、参数的接收(此种方式不支持props传参)：
id:this.$route.params.id
3、传参方式三：query传参
这种方式页面在刷新时不丢失参数。
（1）、参数传递页面：
this.$router.push({name:"AntMemu",//值是在配置路由规则时给路由的命名，相当于别名query:{id:this.id}})
（2）、路由规则配置页面：
{path: '/AntMemu',name: 'AntMemu',//命名路由component: AntMemu,},
（3）、 参数获取(此种方式不支持props传参)：
id:this.$route.query.id
二、三种传递方式的区别
区别一首先就是地址栏的区别，第一种方式参数传递的参数不会在地址栏出现，同时支持两种参数接受方式，但是后两种参数会出现在地址栏中，仅支持使用挂载在vue实例身上的route对象来获取参数。
区别二
再者就是参数的丢失问题，第一种传参方式在页面刷新之后，参数会丢失，但是后两种方式不存在页面刷新参数丢失的情况。
