Vue(Vue2+Vue3)——69.路由的props配置

简介: Vue(Vue2+Vue3)——69.路由的props配置

69 路由的props配置


抛出问题


像这种写法,如果有一两个参数还好,但是如果有很多个参数需要接收,频繁的出现$route.params这种冗余代码,势必是不太好的,那么怎么可以让读取参数的时候简单点呢,不写这么多重复的东西

这时候就要借助路由的配置项props了


props属性


组件中也有props属性,主要是为了让组件接收外部传进来的参数

路由的props是为了让路由组件更方便的收到参数

哪个路由接收东西就给哪个路由配置props属性,关于props它有三种写法,三种写法不能同时出现,三选一


写法1 值为对象


值为对象,该对象中的所有key-value都会以props的形式传给Detail组件,这也是props最简单的写法,但是这种写法用的很少,因为传递的是死数据


写法2 值为布尔值


值为布尔值,若布尔值为真,就会把该路由组件收到的所有params参数,以props的形式传给Detail组件,这种方式虽然确实简化了代码,但是只适用于接收params参数,对与query的参数是接收不到的


写法3 值为函数


这种写法最为强大和实用,把逻辑在路由配置中完成,并且支持query和params的两者方式


总结


作用:让路由组件更方便的收到参数

{
        name:'xiangqing',
        path:'detail/:id',
        component:Detail,
        //第一种写法:props值为对象,该对象中所有的key-value的组合最终都会通过props传给Detail组件
        // props:{a:900}
        //第二种写法:props值为布尔值,布尔值为true,则把路由收到的所有params参数通过props传给Detail组件
        // props:true
        //第三种写法:props值为函数,该函数返回的对象中每一组key-value都会通过props传给Detail组件
        props(route){
                return {
                        id:route.query.id,
                        title:route.query.title
                }
        }
}
相关文章
|
13天前
|
资源调度 JavaScript 前端开发
路由管理:Vue Router的使用和配置技巧
【10月更文挑战第21天】路由管理:Vue Router的使用和配置技巧
28 3
|
21天前
|
JavaScript 前端开发
Vue 2 和 Vue 3 之间响应式区别
10月更文挑战第7天
30 2
|
11天前
|
JavaScript UED
"Vue实战技巧大揭秘:一招解决路由跳转页面不回顶部难题,让你的单页面应用用户体验飙升!"
【10月更文挑战第23天】在Vue单页面应用中,点击路由跳转时,默认情况下页面不会自动滚动到顶部,这可能影响用户体验。本文通过一个新闻网站的案例,介绍了如何使用Vue-router的全局前置守卫和`scrollBehavior`方法,实现路由跳转时页面自动滚动到顶部的功能,提升用户浏览体验。
43 0
|
17天前
|
JavaScript 前端开发 Java
vue2知识点:Vue封装的过度与动画
vue2知识点:Vue封装的过度与动画
14 0
|
JavaScript Go
|
JavaScript C语言 Go
|
11天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
3天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发
|
3天前
|
存储 JavaScript
Vue 状态管理工具vuex
Vue 状态管理工具vuex
|
10天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
29 9