vue-router不同的路由共用一个component

在Vue中,vue-router不同的路由引用共同的component时,不会触发mounted
在网上找到两个解决方案

watch $route
在页面中watch $route来实现

watch: {
  '$route': function() {
    console.log(this.$route)
  }
}

但是这里有一个问题,就是页面第一次加载的时候,还是会触发mounted, 所以如果有在页面渲染时触发的逻辑,这里需要特殊处理一下

设置 router-view 的 key 属性值为 $route.fullPath

<router-view :key="$route.fullPath"/>

设置key为$route.fullPath之后,由于两个路由的fullPath不同,组件会被强制不复用,所以将会回到正常流程,切换路由时mounted会被触发

Last modification:November 27th, 2019 at 02:27 pm
如果觉得我的文章对你有用,打赏杯咖啡吧

Leave a Comment