第一次写vue项目，遇到了很多的问题，都是之前没有遇到过的，例如这次遇到当使用路由跳转时，发现页面数据并没有刷新，后来看了vue-router的文档，里面有这么一句话：**提醒一下，当使用路由参数时，例如从 /user/foo 导航到 user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。**这句话的意思是，虽然路由参数发生了变化，但是组件被再次复用，页面没有变化，数据也没有刷新。不过，官网也给出了相对应的解决方案：**复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch（监测变化） $route 对象：** ~~~ const User = { template: '...', watch: { '$route' (to, from) { // 对路由变化作出响应... } } } ~~~ 今天查资料时，发现了一个比较简单的解决方案，看vue官网教程的条件渲染时，发现一句很有意思的话：要想两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性即可（**说明用:key可管理复用元素**），以前认为v-if是动态的生成/去除元素，仔细看例子，会发现：模板相同，会造成一种“复用”的感觉（v-if和v-else的模板是一样一样的），也就是说，**数据更新之前，会先比较模板先后的异同，再决定是否跟新数据，并不是先更新数据，再刷新模板**。 解决方法：**key是用来阻止“复用”的。 Vue 为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可(Vue文档原话)。** ~~~ <router-view :key="key"></router-view> computed: { key() { return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date() } } ~~~