Vue 路由 props

最新推荐文章于 2024-05-17 08:00:00 发布
最新推荐文章于 2024-05-17 08:00:00 发布
阅读量553 收藏
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z_5126/article/details/122013310
版权
在Vue项目中，使用路由props传递数据时遇到一个问题：当【模板包含router-view标签的组件】视图更新时，props函数会被多次触发。经过分析，这似乎是Vue的正常行为。为解决这个问题，建议将可能导致视图更新的数据操作移至子组件中，从而避免不必要的props调用。
摘要由CSDN通过智能技术生成

项目场景：

Vue 路由配置：使用props属性配置数据，传递给路由组件

问题描述：

props属性是一函数，每次【模板包含router-view标签的组件】视图更新，也会触发props；而不只是路由改变，触发props

原因分析：

编写demo，发现依旧存在该问题，怀疑是本身特性

解决方案：

在【模板包含router-view标签的组件】上不做任何导致视图更新的数据变化，将会导致视图更新的部分移到一个子组件中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"
最低0.47元/天 解锁文章
一只小柯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3-34-路由-路由配置参数 props
northcastle的博客
01-03 2382
vue3 中 路由的参数配置 -props 的使用
vue——路由的props
cc_xxo的博客
03-05 1050
由于获取传输数据时$route.params会会多次出现，给路由配置props属性可减轻代码的编写 需要在接收参数的组件配置相应的props 配置方式1、props: {key:value} routes: [ { path: 'message', component: MyMessage, children: [ { name: 'HomeMessageDetail', path: 'detail/:id/:title', component: MyDetail
六、【Vue-Router】路由的props配置
天行健，君子以自强不息
08-07 3001
路由的props配置
【Vue路由】props配置、replace属性、编程式路由导航、缓存路由组件
十八岁讨厌编程的博客
01-03 1241
本文涉及props配置、router-link的replace属性、编程式路由导航、缓存路由组件等内容
YDOOK:vue3:vue-cli4: router-view Props 用法详细教程
YDOOK
03-01 794
YDOOK:vue3:vue-cli4: router-view Props 用法详细教程 © YDOOK JY Lin 1. 使用方法： 类型: string 默认值: "default" 如果 <router-view>设置了名称，则会渲染对应的路由配置中 components 下的相应组件。 查看 命名视图 中的例子。 2. 使用代码示例： vue 组件中使用： <router-view :getPropsValue="propsValue"></route
vue向路由组件传递props
liudanyang_21的博客
07-18 474
父子间的组件通讯是通过props和$emit来实现的，那么路由之间的通讯呢，往下看： 我现在再webpack里面有一个这样的结构， 我现在想test1里面的按钮点击跳转到test2里面，获得到test1传递过来的id和age， 路由我们可以这么写： { path: "/test2/:id/:age", component:test2, // props:{id:"fang",age:18} props:true } 　　test1.vue：
vue路由props
08-16
Vue路由的props选项用于将路由参数传递给组件。它有两种配置方式：布尔模式和对象模式。 1. 布尔模式： 在路由配置中，可以将props设置为true，这样会将路由参数作为props传递给组件。 ```javascript const ...
vue路由通过props传参
lynnpaul的博客
04-01 4239
vue路由通过props传参 最近在学习vuerouter的传参，查询官网，作为小白真心有点看不懂，折腾了很久才搞懂最简单的一个方式，官网地址：https://router.vuejs.org/zh/guide/essentials/passing-props.html。 网上查了蛮多资料，终于搞明白是什么情况，总结内容如下： 非props方式传参： 方式一：使用params传参 路由配置 { path: '/propstest', name: 'PropsT.
Vue-router路由的props配置
first_hands的博客
05-26 312
作用：让路由组件更方便的收到参数。在Detail组件中使用props接收传递来的数据这种写法传递的参数不灵活 一般很少使用。
(vue)路由中指定prop属性
vvvvvlj
08-22 1006
1.将props设为true。作用同this. $ routes.params。但是推荐使用props，因为要让组件和路由解耦，所以尽量不要在组件中使用$routes。 { path:'/categories/edit',component:CategoryEdit,props:true}, 这样在组件中： data(){ return { props:id } }, 可以直接用 this.id取值，而可以不用 this.$route.params.id 取值 ...
VueRouter Props
clhdtzhh的博客
02-26 90
就是可以通过 props 把路由参数 传递进 对应组件 而不必用$route.params去拿到参数
Vue知识点：路由的props配置
summer_cloudy的博客
03-15 184
【代码】Vue知识点：路由的props配置。
详细分析Vue3中的props用法（父传子）
最新发布
码农研究僧的博客
05-17 1万+
在 Vue 3 中，父组件可以通过 props 向子组件传递数据 子组件通过 defineProps 或 props 来定义它接收的属性 这些属性在子组件中可以直接使用
vue常用路由router之“路由的props配置”
空投在我怀里的博客
03-11 2517
作用：让路由组件更方便的收到参数 { name:'xiangqing', path:'detail/:id', component:Detail, //第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件 // props:{a:900} //第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件 // props:true //第三种写法：props值为
vue2进阶篇：vue-router之路由的props配置
刘大猫
07-09 2329
vue2进阶篇：vue-router之路由的props配置
router-view 组件间传值
热门推荐
这是我的博客
04-11 3万+
情况一：router-view 子组件发生变化导致父组件发生改变 父组件中： <router-view @getMessage="showMsg"></router-view> showMsg (val) { // methods方法 val即为子组件传过来的值 console.log(val) } 子组件中： this.$emit('getMessage', ...
Vue2中router-view的多层嵌套参数传递（无需定义props），无需定义参数名，属性值也可传递进儿子、孙子组件。
weixin_44214515的博客
05-17 1007
router-view的多层嵌套参数传递（无需定义props），无需定义参数名，属性值也可传递进儿子、孙子组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值