Vue多个路由绑定同一组件造成created不执行的解决办法。
具体开发中遇到的需求是：
多个页面调用同一组件，通过传参获取不同的数据展示在页面上。多个路由映射到同个组件，只是传参不同，页面切换不会触发组件的创建cteated方法，怎么办？
这里贴出官方给出的解决办法：
https://router.vuejs.org/zh-cn/essentials/dynamic-matching.html#%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E7%9A%84%E5%8F%98%E5%8C%96
通过watch（监测变化） $route 对象，将获取数据的方法写在watch里
后来具体我们尝试了以下几种方法都可实现：
方法一：query传参
router.js（路由配置）
{path:'/back',redirect:'/back/yjzx',component:viewport,children:[{path:'yjzx',name:'yjzx',component:article}]}
Vue（其他页面调用）
<router-link:to="{name:'yjzx',query:{type:'1'}}"tag="li"><!–多个router-link的name一样或不一样都可，因为带的参数不一样–><iclass="fafa-list-ulfa-fw"></i><span>业界资讯</span></router-link>
Vue（页面代码）
watch:{'$route'(to,from){console.log(this.$route.query)}},方法二：params传参
router.js（路由配置）
{path:'/back',redirect:'/back/yjzx',component:viewport,children:[{path:'yjzx',name:'yjzx',component:article}]}
Vue（其他页面调用）
<router-link:to="{name:'yjzx',params:{type:'1'}}"tag="li"><!–多个router-link的name必须不一样，因为参数是以POST方式传递–><iclass="fafa-list-ulfa-fw"></i><span>业界资讯</span></router-link>
Vue（页面代码）
watch:{'$route'(to,from){console.log(this.$route.params)}},方法三：通过变量传参
router.js（路由配置）
{path:'/back',redirect:'/back/yjzx/:type',component:viewport,children:[{path:'yjzx/:type',name:'yjzx',component:article}]}
Vue（其他页面调用）
<router-link:to="{path:'/back/yjzx/1'}"tag="li"><!–多个router-link的name一样或不一样都可，因为参数不同–><iclass="fafa-list-ulfa-fw"></i><span>业界资讯</span></router-link>
Vue（页面代码）
watch:{'$route'(to,from){console.log(this.$route.params)}},
3种方式都实践过，都可以实现，看个人的爱好和项目情况来定吧。
产品猿社区致力收录更多优质的商业产品，给服务商以及软件采购客户提供更多优质的软件产品，帮助开发者变现来实现多方共赢；
日常运营的过程中我们难免会遇到各种版权纠纷等问题，如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用，您可按照我们投诉流程处理，点我投诉；
本文来自用户发布投稿，不代表产品猿立场 ；若对此文有疑问或内容有严重错误，可联系平台客服反馈；
部分产品是用户投稿，可能本文没有提供官方下下载地址或教程，若您看到的内容没有下载入口，您可以在我们产品园商城搜索看开发者是否有发布商品；若您是开发者，也诚邀您入驻商城平台发布的产品，地址：点我进入；
如若转载，请注明出处：https://www.chanpinyuan.cn/35941.html；
