首页 / 正文

笔记|Vue.js 如何强制刷新、重新渲染共用的组件?

分享·有用功 2018年1月11日 Bee 692

最近在用 Vue 做项目的时候,遇到一个棘手的问题,就是有一个组件是共用的,会根据路由的变化加载数据,然后得到不一样的展示

这里我的共用组件是一个任务的添加、编辑

当路由为 /task/add 的时候为添加任务

当路由为 /task/edit/20 的时候为编辑任务

但是,当从添加跳到编辑的路由的时候,发现组件并不会自动的更新,后来发现这是 Vue 的一个特性,共用组件不会因为路由变化进行重新渲染,但可以通过更新数据进行对页面的改变。但问题来了,我怎样才能知道路由变化了,并且在路由变化的时候重新渲染组件?

原来 Vue 有一个叫 key 的属性,可以绑定到路由视图上,这样在渲染的时候,会根据这个 key 决定是否重新渲染组件

通常我们会这样写:<router-view></router-view>,这就是为什么我们的共用组件在路由变化的时候没有重新渲染的原因了,因为 Vue 会认为这是相同的路由

如果加上 key,<router-view :key=”$route.fullPath”></router-view>,那么在路由变化的时候就会重新渲染组件了,因为这里的 key 是变化了的

广告·AD

评论