vue前端小功能(跳转,传值,缓存等,关闭当前路由页面,跳转页面后刷新)

将登陆用户查询回来的信息缓存下来,全局获取可用

存数据:
sessionStorage.setItem("mobile", res.body.mobile);
取数据:
const mobile = sessionStorage.getetItem("mobile");

页面点击按钮跳转到另一个页面

复制代码
主页面:
<div class="report-item" @click="toOrderBoard(1)">
                        <p class="item-desc">昨日受理量</p>
                        <p class="item-value" style="color:#EC584D;">{{orderBoardCount.yestodayOrderCount}}</p>
                    </div>

methods: {
    toOrderBoard: function(type){
                this.$router.push({path: '/orderBoard', query:{type: type}});
            },
}
路由里:router/index.js
{
        //订单看板
        path: "/orderBoard",
        name: "orderBoard",
        component: () =>
            import ("../views/report/orderBoard.vue"),
        meta: {
            title: '订单看板'
        }
    },

orderBoard.vue 里
data(){
            return {
                list:[],
                param: {
                    flag:0,
                    pageIndex: 1,
                    pageSize: 20
                },
                loadText:'正在加载...',
                loading: true, // 加载更多中
                accountType:'',
                selected: this.$route.query.type,
                way:'',
                
            }
        },
复制代码

 主页面按钮跳转到2级页面后

2级路由操作后保存 完 要关闭当前路由页面,并且返回上一个路由页面,并强制刷新页面

复制代码
// 此步骤是删除当前页面、tagsList 要打断点看看,每个框架可能不一样
this.$store.state.tagsList.splice(this.$store.state.tagsList.findIndex(item => item.path === this.$route.path),1);
// 返回一次性促活任务列表并刷新页面
this.goHome();   

// 直接用async 和 await 同步做法
methods: {
 async goHome() { 
       await this.$router.push('/precisePushList')
       await window.location.reload();
   },
}
参考:https://www.csdn.net/tags/MtTaAg3sNTc1NC1ibG9n.html
复制代码

 

posted @   梦幻&浮云%  阅读(3551)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示