vue比较模板来跟新数据

一，使用场景：

点击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