vue-router 组件复用问题

我们知道，vue有一个重要的理念就是组件化，即将重复使用的功能点抽提出来作为组件，需要使用的页面只需要引用该组件即可得到相应的功能点。

vue-router中我们动态加载视图的代码可能是这样的。

{
    path: '/tabLayout',
    name: 'tabLayout',
    component: resolve => require(['@/components/layouts/TabLayout'], resolve)
}

但是当在同一个页面多次使用同一个组件的时候，其created与 mounted只会在第一次加载时执行。因为只创建了一个实例，如果对实例调用了多次，这多次调用就会造成相互干扰的问题。

为了使组件多次调用不相互干扰，可以采用一些办法。

监听路由
在路由切换的时候，监听路由获取参数，并根据参数加载重新数据。

watch: {
  '$route' (to, from) {
    let dataId = this.$route.params.dataId;
    this.initData(dataId);
  }
}

缺点：组件被重新渲染，组件上的内容随路由参数的变化而丢失。如果不想每次切页面的时候重新渲染，需要另找办法。

router-view key
将router-view的key设置为$route.fullPath，由于前后两个路由的$route.fullPath并不一样, 组件不会被强制复用。这也意味着组件的生命周期钩子会再次被调用，第二次调用的created与 mounted中的内容会被再次执行。

    


computed: {
    key() {
        return this.$route.name !== undefined ? this.$route.name : this.$route
    }
}

参考：https://www.h5w3.com/8764.html