vue 路由传参数和隐藏参数
前言
vue中路由中需要传递参数的话可以用query和param传递,两者类似于get和post。前者地址栏类似xx?p=1后者为xx/1,且后者可以隐藏地址栏显示。其实也可以用vue推荐的vuex进行响应式的参数管理。
传递参数形式:
两者传递参数需要router/index.js进行配置:
{
path:'/page1',
name:'page1',
component:page1,
}
,{
// 默认的param传递参数,显示地址栏,刷新数据还在
path:'page2/:id',
name:'page2',
component: path:'/page2',,
},{
//query
this.$router.push({path:''/xx',query:{p:1}})
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIyZuBHL0FWby9mZvwVZnFWbp1zczV2YvJHctM3cv1Ce-E0YpZlMkZXUYlFdKNjYtlzQNhXU6x0M5kWT2lkekxGbtZFbkdVW0x2RmdHbtNGMONDTwUzVaBnSzIGd4cEZxYkMMlXSzoldxUlWuZ0ViBXO6pVdC5GTzcGRPdXVX9EbOdVTspFRahGZE5EMwkXTzkFVOhXTU1Ee4k3YsR2VZRHbyg1aGJjYzJEWkZHOXFWdVhUY6VzVZBHctxkeWJjWoFzVhRXUXlld4d0YxkTeMZTTINGMShUYvwlbj5yZtlmbkN3YuQnclZnbvN2Ztl2Lc9CX6MHc0RHaiojIsJye.jpg)
query通过path
//param
this.$router.push({'name',params:{p:1})
param通过name
param隐藏参数
只需要去掉修改path即可,但是刷新会丢失数据,可以通过localstorage解决刷新问题。
{
// 刷新丢失数据
path:'page2',
name:'page2',
component: path:'/page2',
}
image.png