vue通过监听实现相同路径的视图重新加载

最新推荐文章于 2024-08-01 15:30:32 发布

转载最新推荐文章于 2024-08-01 15:30:32 发布 · 625 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/665436

文章标签：

#javascript #前端 #ViewUI

本文探讨了在使用Vue.js进行前端开发时遇到的路由复用问题，特别是在菜单路径相同的情况下，页面不会重新加载。文章提供了一种解决方案，通过监听路由变化并调用特定方法来实现页面的重新加载。

最近在做一个项目,前端菜单路径如下:

{
                path: '/oa/workflow/process/:status',
                component: sys_workflow_process,
                name: '流程查询',
                hidden: true
            },
            {
                path: '/oa/workflow/process/1',
                name: '待办流程',
                component: sys_workflow_process,
            }
            ,
            {
                path: '/oa/workflow/process/2',
                component: sys_workflow_process,
                name: '已办流程'
            },
            {
                path: '/oa/workflow/process/3',
                component: sys_workflow_process,
                name: '全部流程'
            },

菜单能正常显示,但发现从待办流程切换到已办流程时,页面没有重新刷新,但URL已经变化了.
经查,是因为各个菜单路由是相同的，vue就会认为你是同一个页面，从而复用已加载的页面，而不会重新加载.
解决办法如下:

  watch: {
            '$route' (to, from) {
                //重新加载页面
                this.switch(to.params['status']);
             this.getDataList();
            }
        }

这样,通过监听后,当路由URL发生变化时,重新加载视图