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（其他页面调用）

    
    业界资讯

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（其他页面调用）

    
    业界资讯

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（其他页面调用）

    
    业界资讯

Vue（页面代码）

watch: {
    '$route' (to, from) {
      console.log(this.$route.params)
    }
},

3种方式我实践过，都可以实现，看个人的爱好和项目情况来定吧。