Vue(Vue2+Vue3)——68.路由的params参数

2023-06-20 174

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Vue(Vue2+Vue3)——68.路由的params参数

68 路由的params参数

路由传参是不只是有query参数，也有params参数，两者写法基本一致，都是分为字符串和对象的写法

携带params参数

如果直接这样使用params参数进行拼接，那么肯定是不行的，虽然自己知道前三个是路由，后面两个才是参数，但是系统并不知道，所以需要麻烦点，在路由配置里面

声明params参数

配置路由声明接收params参数

找到配置这个组件的地方，在对应的组件后使用占位符声明接收params参数

使用params参数

可以看到，在$route里面的params中，看到了传递的params参数

所以获取数据的时候，就可以使用$route.params获取了

现在传参的是死的数据，我们借助表达式传递，和query一样，通用分为字符串和对象写法

字符串写法

对象写法

对象写法的一个坑

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！但是如果使用query，就没有这个限制

它不会报错，但是相关路由会消失跳转不了

总结

1 配置路由，声明接收params参数

{
        path:'/home',
        component:Home,
        children:[
                {
                        path:'news',
                        component:News
                },
                {
                        component:Message,
                        children:[
                                {
                                        name:'xiangqing',
                                        path:'detail/:id/:title', //使用占位符声明接收params参数
                                        component:Detail
                                }
                        ]
                }
        ]
}

2 传递参数

<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
<!-- 跳转并携带params参数，to的对象写法 -->
<router-link 
        :to="{
                name:'xiangqing',
                params:{
                   id:666,
            title:'你好'
                }
        }"
>跳转</router-link>