H5W3
当前位置:H5W3 > uniapp技术问答专区 > 正文

uni-app 中如何刷新页面

我们知道 ,html重新加载页面有几种方式

  1. reload():强迫浏览器刷新当前页面 ;
  2. replace() :通过指定URL替换当前缓存在历史里(客户端)的项目 ;
  3. 添加标签 : 页面自动刷新;

而在uni-app 中并没有页面重新加载和刷新当前页面的概念,所以接下来,告诉不会的同学 uni-app 中怎么刷新页面。

如何刷新页面

场景:从个人中心页面,进入登录页面。登录成功之后返回个人中心页面,个人中心页面数据进行相应的变化。

  1. 使用缓存

    点击登录按钮之后,关键代码:

    // ...
    methods: {
    bindLogin(e) {
    try {
    uni.setStorageSync('login_key', {
    avatarUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg',
    token: 'user123456',
    userName: '缓存登录用户',
    login: true
    });
    } catch (e) {
    // error
    }
    uni.navigateBack();
    }
    }
    // ...  

    返回到个人中心页面,关键代码:

    // ...
    data(){
    return {
    storageData:{}
    }
    },
    onShow: {
    const loginKey = uni.getStorageSync('login_key');
    if (loginKey) {
    console.log(loginKey);
    this.storageData = {
    avatarUrl: loginKey.avatarUrl,
    login: loginKey.login,
    userName: loginKey.userName
    };
    }
    }
    // ...  
  2. 使用 vuex

    vuex 关键代码

    // ...
    const store = new Vuex.Store({
    state: {
    login: false,
    token: '',
    avatarUrl: '',
    userName: ''
    },
    mutations: {
    login(state, provider) {
    state.login = true;
    state.token = provider.token;
    state.userName = provider.userName;
    state.avatarUrl = provider.avatarUrl;
    },
    logout(state) {
    state.login = false;
    state.token = '';
    state.userName = '';
    state.avatarUrl = '';
    }
    }
    })
    // ...  

    点击登录按钮之后,关键代码:

    import { mapMutations } from 'vuex';
    // ...
    methods: {
    bindLogin(e) {
    this.login({
    avatarUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg',
    token: 'user123456',
    userName: 'vuex登录用户'
    });
    uni.navigateBack();
    },
    ...mapMutations(['login'])
    }
    // ...  

    返回到个人中心页面,关键代码:

    import { mapState } from 'vuex';
    // ...
    computed: {
    ...mapState(['avatarUrl', 'login', 'userName'])
    }
    // ...  

关联阅读:uni-app 全局变量的几种实现方式

结语: 整体下来都没有什么难点的,推荐使用 vuex 去实现类似功能。

完成示例,请下载附件。

本文地址:H5W3 » uni-app 中如何刷新页面

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址