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对象来获取参数。
区别二
再者就是参数的丢失问题,第一种传参方式在页面刷新之后,参数会丢失,但是后两种方式不存在页面刷新参数丢失的情况。