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/