Vue：router跳转问题归纳

最新推荐文章于 2024-09-05 21:23:31 发布

转载最新推荐文章于 2024-09-05 21:23:31 发布 · 412 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yiyiboy-core/p/10102413.html

文章标签：

#javascript #ViewUI

本文探讨了Vue中路由跳转及页面数据刷新的问题，特别是在路径相同但参数不同的情况下，如何通过监听路由变化来实现页面数据的正确刷新，避免缓存导致的数据不一致现象。

一般我们在vue工程中进行页面跳转，直接用this.$router.push({path:'/xxx ', query: { id: id,name: "yyy"}})

但是当跳转的路径相同，只有后面携带的参数不同时，往往会出现跳转不生效的情况。

那么往往我们会在进入这个页面的时候调用init()方法，但是不是所有情况都可以用这种方式做的，我们可以通过监听路由的方式处理。

watch: {
    '$route' (to, from) {
        this.$router.go(0);
    }
}

参考资料：https://blog.youkuaiyun.com/wulala_orz/article/details/78928524

实际应用实例：

背景：一个页面，但是有两个路由指向这个页面，需要这两个路由切换时页面数据刷新

使用watch监听router变化

watch: {
    '$route' (to, from) {
        if(to.path.indexOf('/materiel-manage/gz')>=0){
            this.init();
        }
        if(to.path.indexOf('/materiel-manage/source')>=0){
            this.init();
        }
    }
}

存在的问题：所有进入这个页面时，数据有会刷新；

希望能做到：当两个路由指向同一个页面时，页面都能缓存，即我在这个路由下操作着页面，跳转到另一个路由所指向的相同的页面中进行操作，两者不相互干扰。（如果使用keepalive，两者是会被干扰的）

望指教，后续找到方式也会不断更新

在路由跳转，页面刷新这方面还有很多其他的问题，后续遇到，持续更新。

转载于:https://www.cnblogs.com/yiyiboy-core/p/10102413.html