在组件中使用$route会使之与其对应路由形成高度耦合,使用props将组件和路由解耦:
routes:[ { path:‘/user‘, component:User, children:[ {path:info/:id,props:true,component:Info},//boolean值 {path:info1,props:{name:‘zhangsan‘},component:Info},//静态对象 通过$attrs获取props中的数据 {path:info2/:id,props:()=>{name:‘zhangsan3333‘},component:Info}//函数 通过$attrs获取props中的数据 动态路由参数依然使用route.params.id ] } ]
</script>
Info.vue
<template> <div>{{id}}</div>//可以直接获取动态路由参数 </template> <script> export default{ props:{ id:{type:String,default:‘‘} } }
原文:https://www.cnblogs.com/xiaofenguo/p/14607851.html