vue 刷新当前路由

1.路由介绍

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。

2.刷新路由

对于路由，不同的路由跳转，vue会帮我们刷新路由，但是我今天要说的是，同一路由刷新我们的解决方法。

1.在使用Vue-router做项目时，会遇到如/serviceId/:id这样只改变id号的场景。由于router-view是复用的，单纯的改变id号并不会刷新router-view，而这并不是我们所期望的结果。

2.我们可以在点击事件上加上router.go(0)，强制刷新整个页面。当然这种体验效果太差，我认为不可取。

3.使用watch的方法，具体的可以看一下官方文档

 

watch: { '$route': function (to, from) { this.$store.dispatch('updateActiveTemplateId', this.$route.params.templateId) // 通过更新Vuex中的store的数据，让数据发生变化 this.getTemplateById() } }

4.通过改变router-view中的key来达到刷新组件的目的，我现在用的就是这种方法（因为我使用的按需加载，所以加载组件也不会加载所有界面）

 

<router-view :key="activeDate"></router-view>

我用了一个简单粗暴的方式来改变key，时间戳（捂脸）,key的值必须是字符串或者数字。

this.activeDate = (new Date()).toString();