Vue组件复用问题的一个解决方法

一、问题

在vue中，如果路由指向的页面组件【1】是同一个，那么路由出口显示的页面组件就不会被重新渲染。

如：有这样三个页面，视图列表引用的是list.vue，新增表单和回显表单使用的都是form.vue。

当我们在“视图列表”过到“新增表单”或者“回显表单时”，都是没有问题的；

而当我们从“回显表单”过到“新增表单”时，就会发现页面没有被刷新，“新增表单”还会带有“回显表单”刚刚的数据；

这就涉及到“vue组件复用”的问题。

二、原因

如果两个路由都渲染同个组件，组件的生命周期方法（created或者mounted）不会再被调用, 组件会被重用，显示上一个路由渲染出来的自建

<router-view/>

 三、解决

其中一个解决方法是：加唯一key。

在 router-view上加上一个唯一的key，来保证路由切换时都会重新触发生命周期方法（（created或者mounted），确保组件被重新初始化。

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

 

唯一key：这里涉及到vue的计算属性【2】，当依赖的key值发生改变时，就会触发生命周期的方法初始化页面。

 

四、补充

【1】什么是组件

组件（Component）是 Vue.js 的功能，可以扩展 HTML 元素，封装可重用的代码。大组件嵌套小组件，小组件又有连接更小的组件，构建出独立可复用的组件，最后形成大型的应用。

当我们拿到一个前端项目，启动之后可以看到，一个大的页面里面有列表组件，列表组件里面又有按钮组件，就是这样一层层的嵌套。

【2】计算属性

未完待续...