关于vue.js:vuerouter-组件复用问题

咱们晓得，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 中的内容会被再次执行。

<keep-alive>
    <router-view :key="key"></router-view>
</keep-alive>

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

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