站长图库向大家介绍了Vue多个路由,绑定同一组件,created不执行,解决办法等相关知识,希望对您有所帮助
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一样或不一样都可，因为带的参数不一样--> <i class="fa fa-list-ul fa-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方式传递--> <i class="fa fa-list-ul fa-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一样或不一样都可，因为参数不同--> <i class="fa fa-list-ul fa-fw"></i> <span>业界资讯</span></router-link>Vue（页面代码）
watch: { '$route' (to, from) { console.log(this.$route.params) }},3种方式都实践过，都可以实现，看个人的爱好和项目情况来定吧。