问题:
在应用了雷同组件之后,切换路由,不执行 created 和 mounted 办法,无奈获取数据
例如:从 /gameInfo 切换到 /gameInfo/details 只有第一次切换的时候,会执行 mounted,之后就不会执行 mounted 了。
解决:
1,通过 watch 监听 以后页面的 route 变动
watch: {'$route': function() {
// 首页刷新之后, 第一次没有监听 route , 第二次之后, 才开始执行
console.log('route',this.$route)
}
},
2,在 <router-view> 增加 key 属性
<keep-alive>
<router-view :key="$route.path" />
</keep-alive>
以上是网上的解决办法。
但我遇到的问题,仍旧没有解决,最初排查发现,是 <router-view> 的地位有问题。
// layout/index.vue
<template>
<div>
<top-menu />
<game-menu v-if="$route.path !='/home'" />
<transition name="fade-transform" mode="out-in">
<keep-alive>
<router-view :key="$route.path" />
</keep-alive>
</transition>
</div>
</template>
此时 <router-view> 监听的是 里面的导航,所以,当我点击 <game-menu /> 组件里的导航栏,页面并不会更新。
最初将 <router-view> 放到了 <game-menu /> 里,问题解决,每次切换路由,都会执行 mounted 办法了。