当前位置: 首页 > Web前端 > vue.js

vue全家桶(2.5)

时间:2023-04-01 00:54:07 vue.js

a{显示:内联块;稻田ng:20px60px;text-decoration:none;}3.8.动态路由匹配和路由组件参数传递#3.8.1。动态路由匹配动态路由是指它不固定,有一定的模式。我们希望通过一定的匹配方式将这种路由不固定的情况映射到同一个路由组件,例如:一个User组件,不同的ID代表不同的用户,即/user/1,/user/2,/user/3,这些不同用户对应的路由,我们都希望用一个User组件来渲染。vue-router中提供了动态路径参数来满足这个需求。动态路径参数写法:routes:[//动态路径参数以冒号开头{path:'/user/:id',component:User}]这里的id类似于一个变量,id可以是具体的值比如如1、2、3等a{显示:内联块;稻田ng:20px60px;text-decoration:none;}路由配置:routes:[{path:'/user/:id?',component:User}]如何监听/响应动态参数的变化?方法一:使用beforeRouteUpdate钩子函数a{显示:内联块;填充:20px60px;text-decoration:none;}方法二:在组件中watch$routewatch:{$route(){console.log(this.$route)}}路由信息对象$routepath对应路径paramsofthecurrentrouteprotecteddynamicroutingparametersqueryurlqueryparameterhash当前路由的哈希值fullPath完整的url路径,包括查询参数和hashmatched路由记录,包含当前路由名称的所有嵌套路径段current路由的名称#3.8.2.路由组件传参在组件中使用$route会使其与其对应的路由高度耦合,使得组件只能在某些特定的URL上使用,限制了其灵活性。我们需要做的是通过传参的方式将组件和路由解耦,让组件的使用更加灵活。这里我们需要用到props路由配置。我们需要改成routes:[{path:'/user/:id?',component:User,props:true}]使用组件中props的值a{display:inline-block;填充:20px60px;文本装饰:无;