【Jeecg-Uni-App】【VUE】从详情界面返回主界面，要刷新主界面

最新推荐文章于 2025-06-25 18:11:40 发布

原创最新推荐文章于 2025-06-25 18:11:40 发布 · 512 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #vue.js #Javasc #es6

Jeecg-Uni-App 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何通过Vue.js实现页面间的导航返回及主界面数据的自动刷新。具体包括使用window.history.back()进行页面回退、监听路由变化并执行查询刷新、设置meta变量控制刷新行为等方法。

1.从其他界面返回

点击提交按钮或者其他按钮，操作完毕，

返回上一个界面的方法：

[detail.vue]:

submit() {
    ...
    window.history.back()
}

2.主界面监听并重新获取数据从而刷新

[mainList.vue]:

watch: {
    $Route(to, from ) {
        const fname = from.name
        const tname = to.name
        
        console.log('界面切换，从：', from.name, '到当前界面：', to.name)
        
        this.query()
    }
},

3.可以在其他界面设置meta变量

从而确定返回主界面后，是否刷新主届面。

[common/router/modules/routes.js]:

const routes = [

{
    path: "/pages/detail",
    name: "detal",
    meta: {
      title: "详情界面",
      isRefresh: true,
    },
},

...
]

4.在主界面获取该变量做判断

[mainList.vue]:

watch: {
    $Route(to, from ) {
        const fname = from.name
        const tname = to.name
        
        console.log('界面切换，从：', from.name, '到当前界面：', to.name)
        
        if (true = from.name.isRefresh) {
            this.query()
        }
    }
},