Vue Router不要再使用params传参了，params获取不到参数，官方删除params传参

蔚落 2024-04-07 15:28 34阅读 0赞

## 问题描述 ##

之前说过，vue路由传参有两种方式，分别是`query`和`params`；query是明文，params是隐藏的；  
今天在使用params的时候发现获取不到参数了

我的写法：  
1、 路由配置：

{
        
            path:'/about',
            name:'about',
            component:About
        },

2、跳转：

this.$router.push({
        
        name:'about',
        params:{
        
            id:1
        }
    })

3、接收：

console.log(this.$route.params);

4、结果：  
得到一个警告和空对象  
![在这里插入图片描述][507094e1b6c4461b84d4133194b67942.png]

## 原因 ##

查看链接[4.1.4更新日志][4.1.4]发现官方做了删除替代，那这样的话，这种方式就不能使用了，可以通过pinia(vuex)等进行传递

![在这里插入图片描述][704c103935db4b77b0e8969fde16c3cf.png]

## params的正确用法 ##

本身params的定义是为了给动态路由使用的，比如  
1、 路由配置：

{
        
            path:'/about/:id',
            name:'about',
            component:About
        },

2、跳转：

this.$router.push({
        
        name:'about',
        params:{
        
            id:1
        }
    })

或者

this.$router.push({
        
        path:'/about/1',
    })

3、接收：

console.log(this.$route.params);

4、结果：  
![在这里插入图片描述][a7367de431cd4d6fa70687bda4f58645.png]

[507094e1b6c4461b84d4133194b67942.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/2c16401c554c4c008a56e053c19bcb18.png
[4.1.4]: https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22
[704c103935db4b77b0e8969fde16c3cf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/f933385af7d04f3baa54f80ea9adae73.png
[a7367de431cd4d6fa70687bda4f58645.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/663d2cbb6c3e4f2f8442c6d3ef2530c0.png