Vue Router 参数接收

最新推荐文章于 2025-02-05 09:57:00 发布

原创最新推荐文章于 2025-02-05 09:57:00 发布 · 2.4k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

折扇戏美人

标签

#vue.js #前端 #javascript

本文探讨了Vue应用中如何通过query、params和props三种方式传递参数，包括在URL中以'?'符号标识的query参数，以及用于接收动态路由参数的params，以及通过组件间props传递参数的技巧。通过实例展示了在浏览器开发者工具中的观察和如何在组件内部获取这些参数。

query 方式

请求头中是http://localhost:8080/#/demo/news/content?id=3&title=电影这种带有？的形式。

:to=" ":表示to属性里边是表达式
query：属性用作传参

        <router-link :to="{
          name:'content',  //
          query :{
            id: n.id,
            title: n.title
          }
        }">
          {{ n.title }}
        </router-link>

在浏览器中的开发者工具中可以看到这里是有参数了
在这里插入图片描述
我们用this.$route.query就可以取对象中的属性了

params 方式

请求头中是http://localhost:8080/#/demo/news/content/1/电影。

router.js中修改跳转路径
接收参数是用params属性

 <router-link :to="{
          name:'content',
          params:{
            id: n.id,
            title: n.title
          }
        }">
          {{ n.title }}
        </router-link>

在浏览器中的开发者工具中可以看到这里是有参数了
在这里插入图片描述
我们用this.$route.params就可以取对象中的属性了

props方式传递

在这里插入图片描述

 // 第一种写法：值为对象，该对象的所有key-value都会以props的形式传给组件
// props:{
 //     id:1,title:'标题'
 // }
//    第二种写法：值为布尔值，当值为true的时候，就会把该组件收到的全部params参数，以props的形式传给该组件
//    但是这种写法并不能解决query的参数接收
//     props:true,
//    第三种写法，值为函数
//     props($route){
//         return {id:$route.query.id,title:$route.query.title}
//         return {id:$route.params.id,title:$route.params.title}
                        //