一、问题
在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】计算属性
未完待续…
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/117636.html
