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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM