一,使用场景:
点击menu通过路由,跳转当前列表,第二次点击menu,希望可以刷新列表;
二,解决思路:
给路由添加时间戳;
三,参考观点:
用 :key管理可复用的元素
模板相同,会造成一种“复用”的感觉(v-if和v-else的模板是一样一样的),也就是说,数据更新之前,会先比较模板先后的异同,再决定是否跟新数据,并不是先更新数据,再刷新模板。
回到正题,:key是用来阻止“复用”的。 Vue 为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key
属性即可
四,解决方案:
side_nav.vue
<el-menu-item @click.native="clickLink('/product_list')" index="/product_list">商品列表</el-menu-item>
clickLink(path) { this.$router.push({ path, query: { t: +new Date() //保证每次点击路由的query项都是不一样的,确保会重新刷新view } }) },
main.vue
<router-view :key="key"/>
computed: { key() { return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date() } },
参考:
https://www.cnblogs.com/first-time/p/7067674.html