vue路由传参的三种方式/含页面刷新参数丢失解决方案(详细)

一、路由传参的三种方式

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函数中即可

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

二、三种传递方式的区别

1. 区别一

首先就是地址栏的区别，第一种方式参数传递的参数不会在地址栏出现，同时支持两种参数接受方式，但是后两种参数会出现在地址栏中，仅支持使用挂载在vue实例身上的route对象来获取参数。

2. 区别二

再者就是参数的丢失问题，第一种传参方式在页面刷新之后，参数会丢失，但是后两种方式不存在页面刷新参数丢失的情况。