vue路由出口二次进入页面组件不执行created和mounted生命周期钩子
问题描述:参考网上所说,因为多个路由都渲染了同个组件,此时,不会销毁再创建组件而是会复用组件,页面不会刷新。解决:法一:实践成功官方推荐的使用watch监听路由变化,组件中监听watch: {$route(to) {if (to.path=='') {...}}},法二:时间成功使用标签包裹,在页面添加actived钩子函数,将要执行的代码放入actived中。每次重新进入组件都会执行active
·
问题描述:参考网上所说,因为多个路由都渲染了同个组件,此时,不会销毁再创建组件而是会复用组件,页面不会刷新。
解决:
法一:实践成功
官方推荐的使用watch监听路由变化,组件中监听
注意:watch监听路由变化,我们的路由一定要有子路由,监听变化也紧局限在父子路由中,也就是我们这个路由一定要有子路由,在子路由跳转过程中会调用watch,能成功监听
watch: {
$route(to) {
if (to.path=='') {
...
}
}
},
法二:实践成功
使用标签包裹,在页面添加actived钩子函数,将要执行的代码放入actived中。每次重新进入组件都会执行actived钩子
index.js
<keep-alive>
<router-view/>
</keep-alive>
页面组件中:
activated() {
this.delCartsListSync([]);
this.getCartList();
},
法三:实践未成功
在 router-view上加上一个唯一的key,来保证路由切换时都会重新渲染触发钩子(这个方法我尝试了没成功,可能我未得精髓,但是网上都是这么说的,前两个种如果没成功可以试试这个)
index.js中
<router-view :key="key"></router-view>
computed: {
key() {
return this.$route.路由名!== undefined? this.$route.路由名+ +new Date(): this.$route + +new Date()
}
}
法四:未实践,但觉思路可行
路由守卫–>路由独享守卫/路由组件守卫
更多推荐
已为社区贡献1条内容
所有评论(0)