vue路由出口二次进入页面组件不执行created和mounted生命周期钩子

    技术2025-04-01  16

    问题描述:参考网上所说,因为多个路由都渲染了同个组件,此时,不会销毁再创建组件而是会复用组件,页面不会刷新。 解决: 法一:实践成功 官方推荐的使用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() } }

    法四:未实践,但觉思路可行 路由守卫–>路由独享守卫/路由组件守卫

    Processed: 0.008, SQL: 9