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