在vue中，当不同路由对应同一组件页面时会发生再次进入页面时不再重新渲染（为了更高效，所以vue进行了复用）的问题，整理一下解决办法，如下：
方式一、Watch监听：
watch监听路由，当路由变化则将页面的变量更改为初始值，并重新触发mounted中的方法，因为此时已不再执行mounted生命周期函数了；
或监听后使用 this.$router.go(0) 直接刷新此组件；
方式二、通过改变页面的key：
配置一个中间页，中间页可用 router-view 方式或直接引用组件作为子组件使用，两种方式都需要赋 key 值，通过改变key值来重新渲染组件；
<template>
<router-view :key="componentKey"></router-view>
// or：<ChildCompent :key="componentKey"></ChildCompent>
</template>
...
方式三：写不同的页面：
最简单的方式就是写成不同的页面，但是当页面复杂或两个页面有相同的地方需要修改时，便十分繁杂；所以推荐将组件作为子页面，套两个父级页面，不同的路由配置到不同的父页面；
这种方式看上去比之前的方式繁杂一些，但是我在项目中使用了这种方式，因为我的项目使用了keep-alive，前面两种方式都会使得页面无法缓存或清空了前一次进入时的页面缓存，而这种方式只是页面多了一点，父级页面只需引入组件，写得也不多，所以当此组件页面对应的路由不多时也是好用的。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
