vue 路由传参数和隐藏参数

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}})

query通过path

//param
this.$router.push({'name',params:{p:1})

param通过name

param隐藏参数

只需要去掉修改path即可，但是刷新会丢失数据，可以通过localstorage解决刷新问题。

{
    // 刷新丢失数据
      path:'page2',
      name:'page2',
      component:  path:'/page2',
    }

image.png