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

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

Logo

前往低代码交流专区

更多推荐