vue 路由传参数和隐藏参数

朴灿烈づ我的快乐病毒、 2024-04-18 09:29 71阅读 0赞

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

![format_png][]

query通过path

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

![format_png 1][]

param通过name

### param隐藏参数 ###

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

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

![format_png 2][]

image.png

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTMxNTY3My00NDdhZDZlMWNlOWUwODg3LnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzQxMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTMxNTY3My1jMGY0NTEzZTg1MGU5MDZlLnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzUxMi9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTMxNTY3My04NmZlYWJjN2M3MWI2MTgyLnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzIzNC9mb3JtYXQvd2VicA?x-oss-process=image/format,png