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

简介: 最近在做一个项目,前端菜单路径如下:{ path: '/oa/workflow/process/:status', component: sys_workflow_process, ...

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

{
                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发生变化时,重新加载视图

相关文章
|
2天前
|
JavaScript
vue中watch的用法
vue中watch的用法
|
2天前
|
JavaScript 前端开发
vue动态添加style样式
vue动态添加style样式
|
2天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
|
1天前
|
JavaScript API
vue学习(13)监视属性
vue学习(13)监视属性
10 2
|
1天前
|
JavaScript
vue 函数化组件
vue 函数化组件
|
1天前
|
JavaScript 前端开发
vue学习(15)watch和computed
vue学习(15)watch和computed
9 1
|
9天前
|
JavaScript 前端开发
vue学习(6)
vue学习(6)
30 9
|
6天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
|
7天前
|
缓存 JavaScript
vue学习(12)计算属性
vue学习(12)计算属性
15 3
|
7天前
|
JavaScript
vue学习(10)事件修饰符
vue学习(10)事件修饰符
25 3